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validate the form data 








The form data must be validated prior to using it in a query. Add this code to 
the PHP page: 


require_onceC'mysgl.inc.php' ); 
$errors = array(); 
if ClemptyC$_POST['first_name'"])) { 
$fn = mysqL_real_escape_string($_POST[' first_name' ], 
$dbc); 
+ else { 
$errors[] = ‘first name'; 


} 


EY The $errors array will store any errors encountered while 
validating the form. 


2 Text inputs will be validated by confirming that they aren’t empty. 
(See extra bits on page 57.) 


if ClemptyC$_POST['lLast_name'])) { 

$ln = mysql_real_escape_string($_POST['last_name' ], 
$dbc); 
+ else { 

$errors[] = 'Last name'; 


$ 


50 adding records 


introduction 


The Visual QuickProject Guide you hold in your hands offers a unique way to 
learn about new technologies. Instead of drowning you in theoretical possbili- 
ties and lengthy explanations, this Visual QuickProject Guide uses big illustra- 
tions coupled with clear, concise step-by-step instructions to show you how to 
complete a specific project in a matter of hours. 


This particular book in the Visual QuickProject series teaches you how to 

“roll your own” Ajax-enabled application. The specific example will involve 
managing employees in a company, organized by departments into a type of 
address book. But the actual example is secondary to the technologies and 
ideas being taught. By the end of this book, you’ll have a nice, working 
example; tons of usable code; and an education in Ajax that you can apply 
to your own projects. 





how Ajax works 





Normally, when 
a client—the 
user and their 
Web browser— reqdest renineet 
requests a Web response 

page, the server resppnse 

handles the — | 

request, sending 
the data back to 
the client. The 
client loads the 
data, redrawing 
the browser with 
the requested page. For each request, this process is repeated. 


request 





response 





Ajax is one way to create Rich Internet Applications (RIAs): Web sites that 
behave more like desktop applications. With an Ajax-enabled application, 
after the initial loading of the page, subsequent requests can be handled 
behind the scenes. Then the Web browser can be updated without the user 
being aware 
of the server 
requests, the 
downloading 
of data, and so respons , 
on. In short, request: 
Ajax provides 
a nicer experi- en aon iy 
ence for the = ..fequest , [| 


end user. <= —— dis Dares eee 7 
=" response 


request 





; response 
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what you'll learn 





Ajax isn’t really a “thing” in its own right so much as the combination of many 
technologies. In this book, those are (X)HTML, CSS, JavaScript, XML, PHP, 
MySQL, and SQL. The heart of an Ajax application is JavaScript and, in particu- 
lar, a little thing called an XMLHttpRequest object. The XMLHttpRequest object 
wraps up all the functionality required to circumvent the old-fashioned client- 
server process. 


However, this book won’t teach you how to create just an Ajax-enabled appli- 
cation. You'll see how to create a Web site that also works for those users who 
can’t take advantage of Ajax (because their browser doesn’t support JavaScript 
and XMLHttpRequest). Creating an Ajax-enabled application that will still func- 
tion for non-Ajax-enabled browsers is a two-step process. 





In one chapter, you'll create | request 
a non-Ajax version of some 7 


feature. The non-Ajax ver- 


sion will work for any user respqnse 

and show you, the developer, atric ei aceite iciniiane 
what this part of the site omar |Department Employees 
should do. <5 


1 se i tvae beh —aeo 





| Penez.caL 
E CO pete 





request 









‘ * response 
request, : P 


The second step is to add the 
Ajax layer on top of the non- 
Ajax version. The intent of the 
Ajax layer will be the same as 
the non-Ajax layer, but all the 
= | steps will take place in a more 
ok sophisticated way for the end 
user. 


— 
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this book works 





The title of each section 
explains what idea is covered 
on that page. 


Code blocks show what 
should be put in the various 
HTML, CSS, JavaScript, and 
PHP files. Sometimes code 
will appear in boldface to 
indicate that it is being 
added to existing code. 


Captions explain what you're 
doing and why. 


Numbered steps indicate the 
order in which some things 
must occur. 


Screenshots show how the 
code looks or what it does 
upon execution. 


An ellipsis (...) in a code block 


indicates that there is more 
code than is being shown. 
Normally the omitted code 


print the employees 


The PHP page prints the list of employees in the given department. To do so, 
a database query is required. (See extra bits on page 41.) 


if C$did > @) { 

require_once('mysql.inc.php'); 

$q = "SELECT * FROM employees WHERE department_id=$did 
ORDER BY last_name, rst_name"; 

$r = mysql_query($q, $dbc); 

if C(mysql_num_rows($r) > @) { 


Ey Include the database connection script (written in 
the previous chapter). 


F1 Query the database, looking for employees in the 
given department. 


while ($row = mysql_fetch_array($r, MYSQL_ASSOC)) { 
echo "<p><span class=\"name\">{$row[' Last_name']}, 
{$row[' rst_name']}</span><br /> 
<strong>Email</strong>: {$row['email']}<br /> 
<strong>Phone Extension</strong>: {$row['phone_ext']} 
</p>\n"; 
} // End of WHILE Loop. 


EI Fetch any returned records and print them with a little 
bit of HTML and CSS formatting. 


browsing using Ajax 





has been generated on the previous pages. 


Important pieces of code, such as variables, 
functions, and commands, as well as con- 


cepts, are emphasized. 


introduction 





The extra bits section at the 
end of each chapter contains 
tips and tricks that you might 
like to know. The heading for 
each group of tips matches 
the section title. The page 


ee data in the URL, with 


a syntax of page.php?this_ 


: Yooh, value&that_ 


complete the function p. ss 
« When using the GET method, use 


the value null as the only argu- 
ment when calling send(). Any 
data sent over GET is appended 
to the URL itself. When using 


number next to the heading 
makes it easy to find the sec- eas a 
tion to which the tips belong. ee 


All of the form data needs to be 
run through the encodeURICom- 
. ponent() function to make it safe 


POST, you need to provide the 
data when you call sendQ), as it’s 
not sent in the URL. 





prepare for XML ».«7 


e¢ The PHP script sends its response 
as XML data, not as a normal 
Web page. Everything PHP will 
print will be part of this XML. 


The XML data being created is 
really like the data in an HTML 
page, where there's one root ele- 
ment and any number of nested 
subelements. For this example, 
the root element will be called 
response and there will be two 
subelements. There can be zero 
or more elements called error 
and there will always be exactly 
one element called result. In 
comparison, an HTML page has 
a root element called htmL, two 
subelements named head and 
body, and more subelements 
within those. 


value separately, using a for loop 
on an array of form elements lets 
us accomplish the same thing 


with less code. 


The plus sign in JavaScript 
is used to Lactiniiosweneniel 





PI Ne Str 
another. In PHP, the period does . 
the same thing. 
if you wanted to send XML data 
to the PHP script, you would set 
_ the Content-Type to text/xml. 


adding records via Ajax 
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required tools 





This book covers the basics of Ajax but not of Web development. The assumption 
is that you already have, and know how to use, certain tools and technologies. 


| BBEdit File Edit Text View Search Tools Markup Window #! CVS @ @ % Help 


4 a: 686 ee eal dept_ form. html 


Last Saved: 5/11/07 2:02:49 PM 
File Path: iltahale Ss lial form.htm| 
ee sy rey Teepesonn. htm) $ “(no symbol selected) + 
<!DOCTYPE html PUBLIC “~//W3C//DTD XHTML 1.0 Strict//EN" 
“http: //www.w3.org/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
<html xmins=“http: //www.w3.org/1999/xhtmi" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="content-type” content="text/html; charset#utf-8" /> 
<title>Employees by Department</title> 
<script src="ajax.js” type="text/javascript"></script> 
<script srce="dept.js” type" text / javascript’ iti eng 
<style type="text/css" media="all“>@import “style.css";</style> 
</head> 
<body> 
<{-- dept form_ajax.html -~-> 
<p>Select a department and click ‘GO' to see the employees in that department.</p> 
<form action="dept results.php” method="get" id="dept form"> 
<p> 
<select id="did" name="did"> 
<option value="1">Human Resources</option> 
<option value#"2">Accounting</option> 
<option value#"3">Marketing</option> 
<option value*"4">Redundancy Department</option> 
</select> 
<input name#"go”" type=“submit” value="GO" /> 
</p> 
</form> 


<div id="“results"></div> 
</body> 
</html> 





A text editor, integrated development environment (IDE), or What You 
See Is What You Get (WYSIWYG) editor is a must. This might be BBEdit 

on the Macintosh (my personal favorite text editor), Notepad on Windows, 
Eclipse (a popular, open source IDE), or Dreamweaver (a popular, commercial 
WYSIWYG app). It doesn’t matter what you use as long as it’s something in 
which you can create and edit plain-text files. 


The second requirement is a Web browser, but if you have a computer, you 
have one of these. Because Ajax can have browser-specific issues, you'll want 
to have many different browsers on many different operating systems, if at 
all possible. | tested the book’s examples using Internet Explorer and Firefox 
on Windows (XP) and using Safari, Firefox, and Opera on Mac OS X. 


XI1V introduction 





| highly recommend that you use Firefox for development and initial 


testing purposes, as it’s far less quirky than Internet Explorer and has many 
great debugging tools. 


phpinfo() - Windows Internet Explorer 


Jann enna enna nenennnannnnevene Manny Comme canna sneanien man neta nanan nnarnmesannnnesennanener annem ennamnndannannnanantnnn nnnnneannnsanmnasnnenann 


: File Edit View Favorites Tools Help 





The most advanced requirement is a PHP-enabled Web server. You'll need 
to run PHP through Apache, Microsoft's Internet Information Server, or some 
other Web server. This can be on your own computer or on a hosted server. If 
you don’t know what PHP is, you should probably check out one of my PHP 
books before cracking this one (see “the next step” for recommendations). 
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required tools (ont, 


If you're using a hosted server, you'll need to have an FTP (File Transfer Pro- 
tocol) application or similar option for uploading files to the server from your 
computer. 


Finally, youll need MySQL or another database application. This should be on 
the same computer as PHP. If you don’t know what MySQL is, again see “the 
next step” to check out one of my MySQL books. If you want to use a different 
database application, you'll need to change some of the PHP code, and possibly 
the SQL commands, accordingly. 


XvV1 introduction 


companion web site 





The companion Web site for this book can be found at 
www.DMCInsights.com/ajax/. 


“9 Building a Web Site with Ajax: Visual QuickProject Guide::Home Page - Mozilla Firefox 


File Edit View History Bookmarks Tools 


Help 


| Book Home | Table of Contents — Downloads 


About Building a Web Site with Ajax: Visual QuickProject 
Guide 


Welcome to the companion Web site for the book Buiiding a Web Site with 
Ajax: Visual QuickProject Guide, written by Larry Ullman and published by 
Peachpit Press (Summer 2007). 


This site is intended to augment the information presented in the book, as well 
as to correct any errors that may be present. As with all Web sites, the content 
here will be constantly changing so please continue to check back time and 
again for more useful information.| thank you for your interest and hope that the 
book and this site help you with your PHP programming! 


Sincerely, 
Larry 


Currently the site consists of: 


Table of Contents 
The book's table of contents. 


Downloads 
Download every script and SQL command from the book. 


Errata 
A listing of errors contained in the text as well as the opportunity to point out 
errors you have found. 


Forum 
A support forum for advanced PHP users, moderated by Larry Ullman. 


- Forum | 


(= (eX) 


| Announcement: Larry 
_ Ullman’s Newsletter/Mailing 
List 


| | have (finally) created a 
| newsletter/mailing list as a way 
| to regularly update readers. | 


intend to make this as useful 


as possible for the recipients: 

| providing book updates, 

| technology updates, interesting 
| tips and tricks, etc. Also, all 

| book giveaways will now be 

_ handled through this system. | 
| highly encourage everyone to 

| subscribe. For more information 
| and to offer up your own 

| suggestions, see this forum 

| thread. Thanks! (P.S. Hopefully 


the newsletter software is 


working properly, but let me 
_ know if you encounter any 
| problems.) 


(June 4, 2007) 


Larry to teach and develop 


_ PHP and MySQL Classes 





Head to the downloads area to get all of the book’s code so you don’t have to 


type it yourself. 


After reading the book, check out the extras section for more information, 
alternative versions of the examples, and more. 


If you have questions or need any assistance, head to the forum. 


introduction 
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the next step 








The focus in this book is creating a very good and usable Ajax-enabled applica- 
tion. There are a lot of technologies involved, the most important of which is 
JavaScript. 


VISUAL QUICKPRO GUIDE VISUAL QUICKSTART GUIDE 


SECOND EDITION 


Pp COVERS MYSQL4AND5 





For more discussion of PHP, MySQL, SQL, and XML, see some of my other 
books. A basic introduction to PHP can be found in my PHP for the World 
Wide Web, 2nd Edition: Visual QuickStart Guide (ISBN 0-321-24565-2). 

| provide thorough coverage of SQL and MySQL in MySQL, Second Edition: 
Visual QuickStart Guide (ISBN 0-321-37573-4). All of this information, and 
much more, is put together in my PHP and MySQL for Dynamic Web Sites, 
Second Edition: Visual QuickPro Guide (ISBN 0-321-33657-7). And | discuss 
XML in one chapter of my PHP 5 Advanced: Visual QuickPro Guide 

(ISBN 0-32°1-37601-3); 


For more information on (X)HTML and CSS, see Elizabeth Castro’s excellent 
HTML, XHTML, and CSS, Sixth Edition: Visual QuickStart Guide (ISBN 
O-321-43084-0). 
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1. creating the database 





The Ajax-enabled Web site we'll be creating in this book uses a database on 
the server to store all of the content: a list of employees, along with some per- 
tinent sample information about them. To begin, we need to create and popu- 
late this database. For the example, I'll be using MySQL, a popular open-source 
database application. 


This chapter covers what you need to know to create the database but assumes 
that you have access to a MySQL installation. I’‘ll demonstrate the steps in this 
chapter using two different interfaces: the command-line mysql client and 
the Web-based phpMyAdmin. If you have any questions or problems with 
this chapter’s instructions, see my book MySQL, Second Edition: Visual 
QuickStart Guide (ISBN 0-321-37573-4) or search the Web. 


access MySQL 








If you’re running MySQL on your own computer, or have command-line 
access to your server, log into the mysql client. You'll need to enter a 
username and password combination. These values must already be 
established in MySQL in order to work. (See extra bits on page 9.) 





Terminal 


Jeet tucnly mosale be aiasieal -U root -p 


4 Enter password: 





Welcome to the MySQL momtor. 





Commands end with ; or ‘gq. 


TYour MySQL connection id is $1 to server version: 5.@.21-max 


Type “help; " or “Sh 










MySQL - 5.0.21-max 
phpisyAdmin > Protocol version: 10 
&3 Server: Localhost via UNIX socket 
am@a@ > User: root@localhost 
Database _ (i3] MySQL charset UTF-8 Unicode (utf8) 








[#2] MySQL connection collation: 
rr) _unicode_c ci 


: ; | (Databases) .. 





a Create new database @ 


| Please select a 


database “Collation oe 


(Create) 
® Show MySQL runtime information 
&) Show MySQL system variables @ 
% Show processes @ 
Character Sets and Collations 
83 Storage Engines 
I» Reload MySQL 
® Privileges 
Databases 
a Export 
Import 


i ni a 


se SS sete ats : 
STOR CE ory oi ict: Oe. Sade GSN HISSLART ARAN A OCOSNARC AUTOCAD DEER EERE ERE SDS DEE eae SS UREN RUSE 


for help. Type “Sc” to clear the buffer. 






SEO HEE INS REESE ARS EG ee 
“ned can eae a ohidy nise why one Crna eNCS aN abieoe de mas an btannatvenlne oe aN awe oe 


phpMyAdmin - 2.8.2.4 


» MySQL client version: 5.0.24a 
>» Used PHP extensions: mysql 
¥ Language @: English 
d Theme / Style: “originst 
@ phpMyAdmin documentation 
@ Official phpMyAdmin Homepage 
» [ChangeLog] [CVS} [Lists] 












Open new phpMyAdmin window | 


If you’re running MySQL on a remote server, or you just prefer not to go 
command-line, use phpMyAdmin in a Web browser. |t must already be 


preconfigured to access MySQL. 


2 


creating the database 


make the database 





Ke On the command line, using the mysql client, type CREATE DATABASE 
ajax, followed by a semicolon (;), and press Enter or Return. If you've 
accessed MySQL as a user with permission to create databases, you'll see a 
message saying that the query was OK and that one row was affected. 


% a " ¥ 
: fe. See ‘ SE. ME SCREENER ory RES SORES Ga NN nome ae ae Terminal ee Be Sete aN ee pia ; Pe ; A ee 
ee Re eee era ae eee nN Senne Sos ns Berets ONG es te ie hs ani hee Se Re re ORG anon cnc ace Mon ahs Say ce cies) oid ei ain ao Re Oe ete ae Sate ETE 


E 





Sie eee 






ur MySQL connection id is 81 to server version: 5.0.21-max h- 
| Type “help;” or “Sh” for help. Type “Sc” to clear the buffer. 


Jmysql> CREATE DATABASE ajax; 
Query OK, 1 row affected (@.0@ secd 


| mysql> §f 


| mysql> CREATE DATABASE ajax; 
JQuery OK, 1 row affected (2.00 


| mysql> USE ajax; 
9 Database changed 
Jnysql- J 





EF] Type USE ajax, followed by 
a semicolon, and press Enter or 
Return. 


creating the database 





(cont.) 





EW if you are using phpMyAdmin, type the name of the database—I’m using 
the name ajax—in the Create new database box, and then click Create. (You 
can ignore the Collation menu; see extra bits on page 9.) 






Create new database ¢ 


ajax Collation 














calhost/phpMyAdmin/ 





| @ Server: localhost» &@ Database: ajax 





| ae 


Database ajax has been created. The resulting page should. 
coos t= show that the database was 
| created. 


| ajax (0) [Edit] [Create PHP Code } : : 


Es 





| No tables found in 
[database 





| No tables found in database. 





rug Create new table on database ajax " <a 
_ Name: ~ Number of fields: ~~ 





(Databases) ... 

’ ajax (0) 
auth (2) 
bcp_temp (8) 
ecommerce (8) 
ecommercel (5) 


FA If phpMyAdmin did not automatically 
select the new database for you, use the 
drop-down menu on the left to select it. 
(phpMyAdmin will likely have already 
selected that database for you.) 


information_schema {16} 
mysql {18} 

test (7) 
ullmanl!_dmcimain (9) 
zips (2) 





a creating the database 


—_— the tables 











If you are using the {eee — rere ce al 
. . | ce “CREATE TABLE S aanertnent e By 

command-line mysql cli- -> department_id TINYINT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY, fp 

‘ -> department VARCHARC3@) NOT NULL, a 
ent, create the tables in ] => UNTQUE Cdepartment) 

. ; > 3 
the data base by FuUNNING ' Bene: OK, ® rows affected (@.08 sec) 
two CREATE TABLE : mysql> CREATE TABLE employees (¢ 

: employee_id INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY, 


= 

-> department_i1d TINYINT UNSIGNED NOT NULL, 
-> first_name VARCHARC2@) NOT NULL, 

->  Last_name VARCHARC4@) NOT NULL, 

> 


commands. (See extra 
bits on page 10.) 


email VARCHARC6@) NOT NULL, 
>  phone_ext SMALLINT UNSIGNED NOT NULL, 
-> INDEX Cdepartment_id), 
-> INDEX Clast_name}, : 
-> UNIQUE Cemail) ry 


1 -> 5 
: Query OK, @ rows affected (8.00 sec) 


4 SS old hed 


j mysql> §j 


CREATE TABLE departments ( 

department_id TINYINT UNSIGNED NOT NULL AUTO_INCREMENT 
PRIMARY KEY, 

department VARCHARC3@) NOT NULL, 

UNIQUE Cdepartment) 


be 


CREATE TABLE employees ( 
empLoyee_id INT UNSIGNED NOT NULL AUTO_INCREMENT 
PRIMARY KEY, 
department_id TINYINT UNSIGNED NOT NULL, 
first_name VARCHARC(2@) NOT NULL, 
Last_name VARCHARC4@) NOT NULL, 
email VARCHARC60) NOT NULL, 
phone_ext SMALLINT UNSIGNED NOT NULL, 
INDEX Cdepartment_id), 
INDEX Clast_name), 
UNIQUE Cemail) 
); 


creating the database 5 


Run SQL query/queries 0 on \ database ajax: @ 


“CREATE TABLE departments ( 

déepartment_id TINYINT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY, 
department VARCHAR(30) NOT NULL, 

UNIQUE (department) 


:: 
CREATE TABLE pe 2 


ocsoeeesncene ROR FOES EA A NAM ROR 


: 
| 
3 
i 
3 
4 
a ' 


™ Do not overwrite this query from outside the window 
M Show this query here again 





If you are using phpMyAdmin, you can run your commands in the 
SOL pop-up window or through the SOL tab. 


Ai), Http: //localhost/phpMyAdmin/ —— Google . 
“9 Server: localhost > a Database: ajax 


Structure SQL Search Que 
ta lmport Operations Privileges {&£Dro 


Run SQL query/queries on database ajax: 


| CREATE TABLE departments { 
department_id TINYINT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY, 


department VARCHAR(30) NOT NULL, F | 
| UNIQUE (department) LU 
: . ): al 
7 ajax (0) | CREATE TABLE employees ( +1 
__amnlouee id INT UNSUCKED MOT NLL ALITO IMCREMENT DOIMADY KEY 0 


i ajax (0) 


No tables found in 


| database m Show this query here again 


Open new phpMyAdmin window 





A 
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populate the tables 





Finally, populate the tables in fess 2 X.Y. ee — Tarmac) 
the database by running these > Chmon Resources"), 

two INSERT commands in the 
mysql client, if you’re using it. 


Query OK, 4 rows affected (0.00 an 
Records: 4 Duplicates: ® Warnings: @ 


nysals ae a mployees Cdepartment_id, first_ name, Llast_name, email, phone_ext) VALUES ' ; 
~ a. ee : § 


. 4 ta"; Smith’, “L.smith@thiscompany.com’, 234), 
(See extra bits on Dage 1 0.) -> (1, ‘Laverne’, ‘Green’, ‘lL. green@thiscompan ny. com”, 235), 
-> - P *, ‘c.perez@thiscompany.com’, 230), 


ers’, “brianr@thiscompany.com", 231), 
‘Cox’, “cc@thiscompany.com*’, 233), 
rd°, ‘e.howard@thiscompany.com", 122), 
; ray’, ‘g.gray@thiscompany.com*, 128), 
*, “Brooks’, ‘pb@thiscompany. com", forthe 
ve’, ‘Kelly’, “oliv e@thiscompany.com*, 120), 
ine’, “Sande » °j.sander s@thi scompan ny.com", 123), 
e°, ‘Ford’ “zoe@thi sc company.com’, 125), 
> S 5 ‘Fisher » ‘sam@thiscompany.com’, 385), 
“Henry’, ‘Barnes’, “hen ry@thiscompany.com’, 386), 
nor’, ‘Wood* “elean nor@thiscom i pd com’, 387), 
Meo : e.humphries@this mpan y.com’, 4015, 
» ‘conrad@thiscompany. com ° » 410), 
; . -er satetbtacomsu we com’, 409), 
5 . heai ng’, ‘s.redding@thiscompany.com*, 408), 
. Not"  sBugote’ » ‘nat@thiscompany.com~ , 497), 
-» (4, ‘Haz el” "Hay", “h.hay@thiscompany.com’, 402); 
Query OK, 20 rows affected (0.17 8 ec) 
Records: 20 Duplicates: ® Warnin i) 





jnysql> fj 


INSERT INTO departments Cdepartment) VALUES 
C'Human Resources"), 

C'Accounting'), 

C'Marketing'), 

C'Redundancy Department" ); 


INSERT INTO employees Cdepartment_id, first_name, 
Last_name, email, phone_ext) VALUES 

C1,.."Laila*., ‘Smith',...L.smith@thtscompany.com’ ,} 234), 
(1, ‘Laverne’, 'Green', 'L.green@thiscompany.com', 235), 
(1, 'Cal', ‘Perez’, 'c.perez@thiscompany.com', 230), 
C1, 'Brian', ‘Rogers', 'brianr@thiscompany.com', 231), 
C1, ‘Carla’, "Cox", ‘ec@thiscompany.com’, 2353), 

(2, 'Ezra', ‘Howard', ‘'e.howard@thiscompany.com', 122), 
(2, 'Gideon', 'Gray', ‘'g.gray@thiscompany.com', 128), 


continues 
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(cont.) 


continued 


(2, 
(2, 
(2, 


(2, 
G, 
G, 
G3, 
(4; 


(4, 
Gr 
(4, 


(4, 
(4, 


'Penelope', 'Brooks', 'pb@thiscompany.com', 129), 
'Olive', 'Kelly', 'olive@thiscompany.com', 120), 
'Justine', 'Sanders', 'j.sanders@thiscompany.com' , 
1273), 

'Zoe', 'Ford', 'zoe@thiscompany.com', 125), 

'Sam', 'Fisher', 'sam@thiscompany.com', 385), 
'Henry', ‘Barnes', 'henry@thiscompany.com', 386), 
‘Eleanor’, 'Wood', ‘eLeanor@thiscompany.com', 387), 
"Emmet', "'Humphries', ‘'e.humphries@thiscompany. 
com', 401), 

‘Conrad', 'Madsen', ‘conrad@thiscompany.com', 410), 
'Maude', 'Ernst', 'm.ernst@thiscompany.com', 409), 
'Stella', 'Redding', 's.redding@thiscompany.com' , 
408), 

"Nat', 'Fugate', 'nat@thiscompany.com', 407), 
"'HazeL', 'Hay', 'h.hay@thiscompany.com', 42); 


If using phpMyAdmin, you can run your commands in the 
SQL pop-up window or through the SQL tab. 


ocalhost / ajax / | phpMyAd 
lhost/phpMyAdmin/ 
























J Server: localhost » Database: ajax 
Structure SQL Search Query @Export 


SeOperations Privileges Drop 


Zaimport 





am @ @ 


: Database 
| ajax (2) 


Run SQL query/queries on database ajax: @ 



















| (Human Resources’), 
| Accounting’), 
| (Marketing), 

| (Redundancy Department); ai] B 
| INSERT INTO employees (department_id, first_name, last_name, email, phone_ext) VALUES rr — 
LD sila! Sather it ke UE CIR RIN ener recente emanate ett htaatecen nent heccauk : 









ajax (2) 





| & departments 
| & employees 





@ Show this queryhere again 





Open new phpMyAdmin window | 
A 
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access MySOLp2 ~ make the database p.4 


e Youcanuse pretty muchany _ 5 
_ database application for your 
Web sites, not just MySQL. If | 
_ there’s one you're more comfort- 
able with, feel free to switch. 
(Note that you would also need 
to change the PHP code in 
. the rest of the book.) - 
e The mysql client can be tricky 
if you’re not usedtoit. Ifyou ° 
have any problems, check out — 
the MySQL manual,abookon _ 
MySQL, or this book’s support 
site at www.dmcinsights.com/ 
ajax/. Many people find phpMy- 
Admin, also used in this chapter, 
to be an easier option. 


creating the database 


If you’re using MySQL ona 
hosted Web site, your host will 
likely provide you with phpMy- 
Admin access. They may or may 
not let you create databases, 
though. If not, just use the data- 
base you have already (assum- 
ing it does not have tables called 
departments and employees). 


A database’s collation refers to 
the types of language charac- 
ters the database will support. If 
you don't specify a collation, the 
MySQL default collation will be 
used. This is normally fine. 


make the tables p.5 
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Both tables are defined ina 
minimalist way. You can add 
columns if you’d like, but you'll 
need to change the INSERT 
commands (later in the chapter) 
accordingly. 


The SQL commands in this chap- 
ter, and all of the book’s code, 
can be downloaded from www. 
dmcinsights.com/ajax/. 


The departments table has a 
unique index on the department 
column, ensuring that each 
department is listed only once. 


There is a one-to-many relation- 
ship between the two tables. 
Each employee can be in only 
one department but each depart- 
ment can have many employees. 
This relationship is represented 
by the department_id column, 
which is in both tables. 


You can create tables in php- 
MyAdmin using either of the 
SQL text areas as shown in 

the examples or by using the 
create table prompt. To use the 
prompt, provide phpMyAdmin 
with the name of the table and 
the number of fields, and it will 
create a form where you can 
enter all of the column definitions. 


populate the tables p.7 


The data being inserted isn’t 


important, so long as you popu- 


late the tables with some infor- 


-mation. You can make up your 


own records or download the 
SQL commands from the book’s 
corresponding Web site at www. 
dmcinsights.com/ajax/. 


The department_id value for 
each employee must correspond 


to an actual department_id 


from the departments table. 
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2. browsing employees 


This book’s example contains three facets: browsing employees by department, 
adding employees, and searching for employees by last name. For each sec- 
tion, we'll create a non-Ajax version, and then apply the Ajax elements on top. 
In this chapter, we'll make a non-Ajax way to browse employees. To do so, we'll 
create one HTML page, two PHP scripts, and a CSS style sheet. 


The non-Ajax pages can act as a model for how the Ajax layer should behave, 
and more importantly, if anyone accessing this site cannot use the Ajax-enabled 
pages, the site will still be fully functional for them. Also, two of the files gen- 
erated in this chapter—one PHP script and the CSS document—will be used by 
all of this book’s examples, Ajax and non-Ajax alike. 


You may find it easiest to follow along by first downloading all the code from 
the book’s corresponding Web site (www.dmcinsights.com/ajax/). 
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a First, on pages 13-14, we'll create a simple HTML form. 


The HTML form will have a drop-down menu listing the depart- 
ments. These values will match those inserted into the database in 
Chapter 1, “creating the database.” 














File Edit View Tsory Bookmarks Tools” _Help ok; 
[ L a] “htt: i 192, 168, 0. 102/ajexidept_ form, html ee | | | 
Select a de epartment and click 'GO' to see the 

sche es in that department. 


‘Human Resourcss When the user clicks GO, the 
form will be submitted to a 
PHP script. 










Pier Beecuicee. 
Accounting 
Marketing 
Redundancy Department 






2 On pages 15-1 7, the PHP script that —— Reagan SO Ya rte cra Mar 
handles the HTML form will be written, (bei tte ire ecereeecsoremretes 


i=) ‘http://192, 168.0, ‘102jajaxidept ‘results, iphp?did= -38submit= GO hae 


The script shows the employees for 


the department selected in the HTML Department Employees 
form. These employees come from the 

BARNES, HENRY 
database created in Cha pter VF Email: henry@thiscompany.com 

Phone Extension 386 
E} Because the PHP page’s results come 
2 . FISHER, SAM 

from d data base, a special PHP script Email: sam@thiscompany.com 
will be written on pages 18 solely Phone Extension: 385 
for the purpose of connecting to the WOOD, ELEANOR 


Email: eleanor@thiscompany.com 
Phone Extension 38/7 


database. 


4 On pages 19-20, a very simple style 
sheet will be made and added to the HTML page, giving the Web pages a 
slightly (but only slightly) more attractive appearance. 


EW As a last step, we'll test what we've built to make sure it all works. 


At the end of this chapter, in the extra bits section, you'll find more informa- 
tion, tips, and recommendations regarding all of these steps. 
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create an HTML page 


The very first step in the Ajax application is a basic HTML form. Use any 
text editing application to make a new HTML document. (See extra bits 
on page 22.) 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// 
EN" 
"http://www .w3.org/TR/xhtmL1/DTD/xhtml1-strict.dtd"> 
<html xmlLns="http://ww.w3.org/1999/xhtmL" xmL: 
Lang="en" Lang="en"> 
<head> 

<meta http-equiv="content-type" content="text/html ; 
charset=utf-8" /> 

<titLe>EmpLoyees by Department</title> 
</head> 
<body> 
<!-- dept_form.html --> 
</body> 
</html> 





All this jibberish is just the framework of an 
HTML page. The only bit of text here that will 
be apparent to the end user is the <title> 
value, which shows up in the top of the user’s 
Web browser (see the figure on page 12). 


Save this file as dept_form.html and place it in 
a directory on your Web server. 
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add the HTML form 








Just before the form, add instructions for the user. 


The value for the form’s action should be the name of the PHP 
script that will handle this form. Set the method as get. Give 
the form a meaningful id value. (See extra bits on page 22.) 





<body> 
<!-- dept_form.html --> 
<p>Select a department and click 'GO' to see the 
empLoyees in that department.</p> 
<form action="dept_results.php" method="get" i1d="dept_ 
form"> 
<p> 
<select id="did" name="did"> 
<option value="1">Human Resources</option> 
<option vaLue="2">Accounting</option> 
<option value="3">Marketing</option> 
<option vaLue="4">Redundancy Department</option> 
</select> 
<input name="go" type="submit" vaLlue="GO" /> 
</p> 
</form> 
</body> 
</html> 


The form contains a select menu, listing the departments. The value 
of each option is the department number from the database. The name 
and id of this form element must be did (short for department ID). 





The form needs a submit button, too. 
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start a PHP page 


The main PHP page handles the form submission. It should also be a valid 
HTML document, so start with those tags. (See extra bits on page 22.) 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// 
EN" 
"http: //www.w3.org/TR/xhtmL1/DTD/xhtmL1-strict.dtd"> 
<html xmLns="http://www.w3.org/1999/xhtmL" xmL: 
Lang="en" Lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html ; 
charset=utf-8" /> 
<title>EmpLoyees by Department</title> 
</head> 
<body> 
<hi>Department EmpLoyees</h1> 
<?php # dept_resulLts.php 
?> 
</body> 
</html> 


All of the page’s functionality will go in between the PHP tags. 


This file must be saved as dept_resuLts. php and placed in the 
same directory as dept_form.htmL1L. 
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print the employees 










EY Within the PHP tags, start by making sure that a valid depart- 
ment ID was received. The department ID must be an integer 
greater than 0. (See extra bits on page 23.) 


<?php # dept_resuLts.php 

$did = Q; 

if CissetC$_GETL'did'])) { 
$did = Cint) $_GETL"did']; 


' 
if C$did > 0) { 

require_onceC'mysgl.inc.php' ); 

$q = "SELECT * FROM employees WHERE department_ 
id=$did ORDER BY Last_name, first_name"; 

$r = mysqlL_query($q, $dbc); 

if Cmysqgl_num_rows($r) > @) { 

while C$row = mysql_fetch_arrayC$r, MYSQL_ASSOC)) 

{ 


echo "<p><span cLass=\"name\">{$row[' Last_ 
name']}, {$row 'first_name' ]}</span><br /> 
<strong>Email</strong>: {$rowL'email']}<br /> 
<strong>Phone Extension</strong>: {$rowL'phone_ 
ext' |} 
</p>\n" ; 
$ 





Eq Then include the database connection script (to be written next). 
E} Query the database, looking for employees in the given department. 


4 Fetch any returned records and print them with a little bit of 
HTML and CSS formatting. 
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report on any errors 





The PHP script should let the user know if an error occurred. Complete the 
two IF conditionals created in the previous steps. 


</p>\n"; 
} 

+ else { 
echo ‘<p class="error">There are no employees 
Listed for the given department.</p>'; 

} 
+} else { 
echo ‘<p class="error'">PLlease select a valid 
department from the drop-down menu in order to view 
its employees. </p>'; 
} 


?> 








Ey The fi rst else Cc | ause WI | | a Dp ply “2 Employees by Department - Mozilla Firefox 
if the database query didn’t iene eee | 
return any results. 


Department Employees 


There are no employees listed for the given 
department. 


EA The second else clause will 
apply if the PHP script did not [el mafocimsenerie nceaeriomseco— Ee 
receive a valid department ID.— 








Department Employees 


Please select a valid department from the drop-down 
menu in order to view its employees. 
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connect to the database 








Create a new, blank PHP script that connects to the database. This script does 
not require the basic HTML tags. (See extra bits on page 23.) 


EY The script first tries to connect to MySQL. The username and pass- 
word values must match an existing MySQL user. Change these values 
in this code to match the appropriate user for your MySQL server. 


FY The script then attempts to select the ajax database. This is the 
name of the database created in Chapter 1. 


<?php # mysql.inc.php 
$dbc = @mysql_connect C'Localhost', ‘username’, 


"password' ); 


if C!$dbc OR !mysql_select_db C'ajax')) { 







echo '<p class="error">The site 1s currently 
experiencing technical difficulties. We apologize for any 


tnconvenience. </p>' ; 
exit); 
} 


?> 


E} Error messages are 
printed if either attempt 
fails. If so, the script then 
terminates because there’s 
no need to go on without a 
database connection. 


ZY save this file as mysql. 
inc.php and place it in the 
same directory on your Web 
server as dept_form.htmL. 
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©) Employees by Department - Mozilla Firefox 





(- [O)lx) 
File Edit ‘view History Bookmarks Tools Help “ak 


oj http://192.168.0, 102/ajax/dept_results. php?did=1&submit=Go | ¥ | P| 


Department Employees 





| The site is currently experiencing technical 
difficulties. We apologize for any inconvenience. 
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create a style sheet 


The CSS style sheet is a separate document that dictates how the pages look. Create a 
new file in your test editor or IDE, containing this code. (See extra bits on page 24.) 


body { 
font-family: sans-serif; 

} 

.name { 
font-weight: bold; 
text-transform: uppercase; 
color: #009; 

t 

error { 
font-weight: bold; 
color: #CQQ 

} 

#results { 
border: medium solid #39@; 
display: none; 
padding-Left: 1@px; 
width: 3Q@Qpx; 


The body section sets the default font for the entire HTML page. 


The second section formats text with a class value of name. That would 
be the employee’s name in the listing of results in dept_results. php. 


The third section applies some formatting to any errors (which will have 
a class value of error), like those created in both PHP scripts. 


The final section applies to any block with an id value of results. You'll use 
this when adding the Ajax layer in the next chapter. 


Save this file as styLe.css and place it in the same directory on your Web 
server as every other file. 
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use the style sheet 





For the style sheet to be used, it must be referenced in the HTML and 
PHP pages. Do so by adding a line to the <head> section of both files: 


<titLe>EmpLloyees by Department</titLle> 
<style type="text/css" media="aL1l">@import "styLe. 


css" ;</styLe> 
</head> 
<body> 









“) Employees by Department - Mozilla Firefox 






Slee 


File Edit View History Bookmarks Tools Help 


oes ri eh A BEN RU LLCS AVL ERD ADDS NAVEL CHEER. NC NEL ANGRDEE RS CML HS ELDERS REE CID. OI al) SH A ANAS NT | 
(Lo http:/192,168.0,102/ajax/dept_results.php?did=3&submit=GO | ¥ Ps | 





Department Employees 







Barnes, Henry 
Fmail: henry @thiscompany.com 
Phone Fxtension: 356 







Fisher, Sam 
Fmail: sam@thiscompany.com 
Phone Extension: 355 







Wood, Eleanor 
Fmail: eleanor@thscompany.com 
Phone Extension: 38? 
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The style sheet is mostly 
cosmetic. The non-Ajax 
layer will work perfectly 
fine without it, but it won't 
look as nice. 
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test the pages 





EW Load the HTML page in your Web 
browser to test what we've created so far. 


The address must begin with http: // for 
this to work. (See extra bits on page 24.) 


B select a department and click GO. 


9 Employees by Department - Mozilla Firefox 


File Edit YWiew History Bookmarks Tools Help 


Select a department and click 'GO' to see the 
employees In that department. 


Human Resources 


FE} The PHP page 


File Edit View History Bookmarks Tools Help 


[- |[\lx! 





S h O U | d S h OW t h e i cl er RE aM SS ERNST Milt GSE BE ER es MR ESSN Vv 


results. 
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Sans 





Department Employees 


COX, CARLA 
Email: cc@thiscompany.com 
Phone Extension: 233 


GREEN, LAVERNE 
Email: |.green@thiscompany.com 
Phone Extension: 235 


PEREZ, CAL 
Email: c perez@thiscompany.com 
Phone Extension: 230 


ROGERS, BRIAN 
Email: brianr@thiscompany.com 
Phone Extension: 231 


SMITH, LAILA 
Email: |. smith@thiscompany.com 
Phone Extension: 234 
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create an HTML page p.:3 


« HTML, JavaScript, CSS, and 
PHP can be written in nearly 
any application. | prefer to use 
a simple text editor (specifi- 
cally, BBEdit on Mac OS X), but 
use what you like. People who 
focus on Web development 
often like a WYSIWYG (What 
You See Is What You Get) tool 
like Dreamweaver. PHP develop- 
ers sometimes lean toward IDEs 
(integrated development enviro- 
ments) like Eclipse, NuSphere’s 
PhpED, or Zend Studio. 


e For the HTML in this book, I'll 
be using the XHTML 1.0 Strict 
standard. For more information 
on this, see a dedicated HTML 
resource, like Elizabeth Castro’s 
most excellent HTML, XHTML, 
& CSS: Visual QuickStart Guide, 
Sixth Edition (ISBN-13: 978- 
0321430847). 


e Both the Ajax and non-Ajax ver- 
sions of this example use PHP, 
which means that you must 
have a PHP-enabled Web 
server to test the examples on. 
This can be your own computer, 
if you've installed PHP, ora 
remotely hosted Web site, if you 
have one of those. 
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For the sake of simplicity, every 
file created in this book will just 
go in the same folder on the 
server. 


add the HTML form p.14 


When it comes to handling 
HTML forms, the action and 
the method are the two most 
important considerations. The 
action tells the browser to 
what page the form data should 
be sent. The method tells the 
browser how that data should be 
sent. The get method sends the 
data in the URL. 


Normally | would have PHP 
dynamically generate any drop- 
down menu that corresponds to 
a database table. I’m saving steps 
by not doing so here. 


start a PHP page p.1s 


PHP is a server-side language 
used to dynamically gener- 

ate HTML code (among other 
purposes). Anything within the 
PHP tags—<?php and ?>—will 
be treated as PHP code. Any- 
thing outside of those tags will 
immediately be sent to the Web 
browser and treated as HTML. 
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connect to the database p. 1s 


rece comes time to test ie e As many PHP scripts in this 


“daait of the Web site, if you have 
problems with this page you'll — 
need to employ some standard 
_ PHP-database debugging tech- 
| niques. Begin by printing out 
the query being run (add echo 
$q; after the query is created). | 
Then run the query using another 
interface, like the command-line 
- mysql client or the Web-based 
‘phpMyAdmin. These two steps | 





will confirm what the query S 


ae results De 

-« Another useful depuuine tech- 

nique for any PHP script is to 
view the dynamically-generated _ 

HTML source code in your Web 

_ browser. Sometimes the problem 

can be hidden there. 


_ « For more information on PHP > 
and PHP-MySQL interactions, 
see my book PHP and MySOL 
for Dynamic Web Sites: 
Visual QuickPro Guide, Sec- | 
ond Edition (ISBN-13: 978- 
0321336576) or search the Web. 
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application will use the database, 
it’s best to create one script that 
establishes that connection. 
Every page that requires a data- 
base connection will then include 
this file. 


The mysqL.inc.php script can 
be a likely cause of problems. To 
guarantee that it works when 

it comes time to test the site, 
make sure you are using a user- 
name and password combi- 
nation that has access to the 
ajax database. If you have any 
problems, check out the MySQL 
manual, a book on MySQL (like 
my MySQL, Second Edition: 
Visual QuickStart Guide 
CISBN-132978-0321375735), or 
this book’s support Web site at 
www.dmecinsights.com/ajax/. 
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create a style sheet p. 19 
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I'm making only minimal use of 
CSS (Cascading Style Sheets) in 
this book, but CSS is definitely 
part of Rich Internet Applications 
(RIA), like the one being created. 
For more information on this 
subject, search the Web or check 
out Elizabeth Castro’s HTML, 
XHTML, & CSS: Visual QuickStart 
Guide, Sixth Edition (ISBN-13: 
978-0321430847). 


The most interesting of the style 
definitions is the one for items 
with an id value of results. Such 
items will not be displayed when 
the page is first loaded. Then, 
when appropriate, the JavaScript 
will fill that section with results 
and make it visible. This all takes 
place in the Ajax layer, created in 
the next chapter. 


test the pages p.21 
e All PHP pages must be run 


through a URL in order to work. 
Therefore, the HTML form 
must also be run through a URL 
(the address must begin with 
http: //). If the address begins 
with fiLle://, the PHP script 
handling the form won't do its 
thing. | 

Getting these components to 
work is a perfect first step in 
creating an Ajax-enabled layer. 
It’s easier to debug these pages 
than it will be once JavaScript 
and other technologies are added 
to the mix. 


Debugging PHP may be the 
hardest skill for the beginner to 
learn—unfortunately, the begin- 
ner will end up doing the most 
debugging (it’s a “trial by fire” 
situation). If you have problems 
getting these pages to work, 

see the book’s Web site at 
www.dmcinsights.com/ajax/, 
for assistance. 


browsing employees 


3. browsing using Ajax 





In the previous chapter, we created the non-Ajax parts of the employee brows- 
ing pages. Although the focus in this book is on Ajax, it’s very important to 
have working, non-Ajax components in place for those who can’t take advan- 
tage of the lovely Ajax interface. In this chapter we'll place the Ajax layer on 
top of the existing one. 


The Ajax components consist of three files: one JavaScript file that will pro- 
vide all-purpose, browser-safe Ajax functionality; another JavaScript 
file that will provide page-specific functionality; and one PHP script that 
will handle the server-side needs of the Ajax layer. To make these additions 
active, the main HTML form will be slightly modified as a last step. 
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what we'll do 





ee First, on pages 27-28, we'll create a JavaScript file that makes a browser- 
specific supported Ajax object. That object will be used by any page requiring 
Ajax functionality. 


2. On pages 29-31, asecond JavaScript file that defines the functionality 
specific to the employee-browsing aspect of the example will be started. 


E] A new PHP script will be written on pages 32-34. This script will return the 
results of the Ajax request to the JavaScript. 


4 On pages 35 and 36, the second JavaScript page will be completed, han- 
dling the PHP request and updating the HTML page. 


Ey Next, the HTML page will be modified to include the Ajax layer on page 37. 
G As a last step, on page 38 we'll test what we've built to make sure it all works. 


At the end of this chapter, in the extra bits section, you'll find more 
information, tips, and recommendations regarding all of these steps. 
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make a function 


One JavaScript file will contain all of the code for establishing generic Ajax 
functionality. Use any text editing application to make a new JavaScript docu- 
ment. (See extra bits on page 39.) 


function getXMLHttpRequestObjectC) { 
var ajax = false; 


$ 


EY The JavaScript function is called 
getXMLHttpRequestObject() (it’s 
a long but descriptive name). This 

function creates a browser-specific 
XMLHttpRequest object, stored in 

the variable ajax. 


EA The function assumes no Ajax 
support to start (the ajax vari- 

able is initialized with the Boolean 
value of false). In the rest of the 
function, browsers have to “prove” 
they can take advantage of the Ajax 
functionality. 
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check for Ajax support 





Within the function, check what kind of XMLHttpRequest object the browser 
supports. If a browser supports a specific type of XMLHttpRequest object, make 
the ajax variable an object of that type. (See extra bits on page 39.) 


EY Most Web browsers—Apple’s Safari 1.2 and later, Mozilla 
and Firefox, Opera 8 and later, and newer versions of Internet 
Explorer—should meet this first condition. 


function getXMLHttpRequestObjectC) { 
var ajax = false; 
if Cwindow. XMLHttpRequest) { 
ajax = new XMLHttpRequest() ; 
} else if Cwindow.ActiveXObject) { 
try { 
ajax = new ActiveXObjectC"Msxm1L2.XMLHTTP" ); 
+ catch Ce) { 
try { 
ajax = new ActiveXObjectC"Microsoft.XMLHTTP" ); 
+ catch Ce) { } 
} 


J 


return ajax; 


5 





Eq Older versions of Internet Explorer (that have 
Activex enabled) should get an XMLHttpRequest 
object from one of these two lines. 


E} Finally, this function returns the ajax variable. 


EY Save this file as ajax. js and place it in the 
same directory on your Web server as every 
other file. 
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call the function 


The ajax.js file defines a function that creates an XMLHttpRequest object, but 
it doesn’t actually use that object. Another JavaScript file will do that for each 
specific instance, like the HTML form already created. Use any text editing 

application to make a new JavaScript document. (See extra bits on page 40.) 


EY The first line tells the Web browsers to 
run the init() function after loading the 
entire page. The 1n1tC) function sets up 
all the Ajax activity. 






window.onLload = init; 

function initd) { 
var ajax = getXMLHttpRequestObjectC); 
if Cajyax) { 
+} // End of ajax IF. 

t /7- End of initC) functvon. 





Eq The init©O function calls the 
getXMLHttpRequestObjectC) 
function to get a valid, browser- 
specific object. 
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Eq The initQO function 
then checks to see if the 
ajax variable has a valid 
value. With supported 
browsers, ajax will be an 
XMLHttpRequest object. 
With nonsupported 
browsers, ajax will have 
a value of false, and this 
conditional will be false. 
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Now the JavaScript should EW The initO function next checks 


tell the browser what actions to see if the browser supports the 

should be taken when certain Document Object Model (DOM) 

events occur. (See extra bits and, specifically, if the page has an 

on page 40.) element with an 1d of results. 
1f Cajax) { 


if Cdocument.getELementByIdC'results')) { 
document. getELementById('dept_form').onsubmit = 
functiond) { 

var did = document.getELementById('did'). 





vaLue; 


2 If the browser supports it, an 
onsubmit() event is attached 
to the form (which has an 1d 
value of dept_form). In other 
words, when the form is sub- 
mitted, do the following... 


30 browsing using Ajax 





E} Provide to the ajax object the name of the page that should be sent 
the request. This is dept_results_ajax.php, to be written next. The 
request will be made using the get method. 





EY As part of that request, the department ID value (from the form) will 
be passed along in the URL. 


ajax.openC'get', "dept_results_ajax.php?did=' 
+ encodeURIComponent(did)); 
ajax.onreadystatechange = function(d) { 
handLeResponseCajax) ; 
} 


Ey When the ajax object’s readyState value changes, the 
handLeResponse() function should be called, passing that 
function this same ajax object. 


[J Then the actual Ajax request is made. 


ajax.sendCnulL); 
return false; 
} // End of anonymous function. 
} // End of DOM check. 
} // End of ajax. IF. 





Ed Finally, the function returns a value of false to tell the 
Web browser not to actually submit the form (since the Ajax is 
handling the form submission). 


EY Save this file as dept. Js and place it in the same directory 
on your Web server as every other file. 
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begin the PHP page 


A new PHP script will handle the Ajax request. It works exactly like 
dept_resuLts.php (which we created in the previous chapter) except 
that it doesn’t need to print the opening and closing HTML tags. Use 
any text editing application to make a new PHP document. 


EW The page starts by making sure that it receives a valid 
department ID in the URL. For security purposes, assume 
we don’t have a valid department ID. 


FE] If a department ID was passed to this page in the URL, 
type-cast it (force it to be an integer). 


<?php # dept_resuLts_ajax.php 

$did = Q; 

if CissetC$_GET['did'])) { 
$did = Cint) $_GET['did']; 


} 
if C$did > 0) { 
+ else { // Invalid department ID! 

echo "<p class="error">PLease select a valid department 
from the drop-down menu in order to view its empLoyees.</ 
p>"; 
} 


?> 







E} If the result is a positive integer, we can go ahead and 
query the database. 


4 If the result isn’t a positive integer, print an error 
message instead. 


32 browsing using Ajax 


print the employees 


The PHP page prints the list of employees in the given department. To do so, 
a database query is required. (See extra bits on page 41.) 


if C$did > @) { 

require_once('mysql.inc.php'); 

$q = "SELECT * FROM employees WHERE department_ 
id=$did ORDER BY Last_name, first_name"; 

$r = mysql_query($q, $dbc); 


Ey Include the database connection script (written in 
the previous chapter). 


E] Query the database, looking for employees in the 
given department. 


while C$row = mysgl_fetch_array($r, MYSQL_ASSOC)) { 
echo "<p><span cLlass=\"name\">{$row[' Last_name' ]}, 
{$rowL'first_name']}</span><br /> 
<strong>Email</strong>: {$row[L'email']}<br /> 
<strong>Phone Extension</strong>: {$row['phone_ext' |} 
</p>\n" ; 
} // End of WHILE Loop. 


E} Fetch any returned records and print them with a little 
bit of HTML and CSS formatting. 
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print the employees on, 





ZY Print an error if no employees were 
found in the given department. 


+ else { // No empLoyees. 
echo ‘<p class="error">There are no employees listed 
for the given department.</p>'; 
} 
mysqL_close($dbc); 
+} else { // Invalid department ID! 


Eq close the database connection. 


[Fl Save this file as dept_results_ajax. php 
and place it in the same directory on your Web 
server as every other file. 
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handle the response 


The PHP page prints out the employees, but since Ajax is being used, this 
printout will actually be returned to the original JavaScript. Add this new 
function to the dept. js JavaScript file. (See extra bits on page 41.) 


EY This JavaScript function is called 
when the ajax object’s readyState 
value changes (see the init() func- 
tion). The function receives the Ajax 
object when called. 


function handleResponseCajax) { 


1f Cajax.readyState == 4) { 


+} else { 





E} If the status code is equal to 
either 200 or 304, the returned 
results should be fine to use. 
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if CCajax.status == 2Q0) | 


EA The function shouldn't do 
anything until readyState has 
a value of 4, meaning that the 
Ajax transaction is complete. 





| Cajax.status == 304) ) 


document .getELementByIdC'dept_form').submitQ); 


EY If we didn’t get a valid status 
code back from the Ajax request, 
we should formally submit the 
form to the handling PHP page 
(as if the Ajax layer didn’t exist 
at all). 
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display the results 





The final step in the Ajax process is to display the results by putting what 
the PHP page returned on the HTML page. This code completes the han- 
dLeResponse(_) function. (See extra bits on page 41.) 


EW The results variable now 
refers to a specific area in the 
DOM of the HTML page. 


if CCajax.status == 200) || Cajax.status == 304) ) { 
var results = document.getELementBylIdC'resuLts'); 
resuLts.innerHTML = ajax.responseText; 
resuLts.styLe.dispLay = ‘block’; 

+ else { 





FA The text in the results area 
is set to the returned response 
from the Ajax request. In this 
case, that’s whatever the PHP 
page printed out. 


Eq The results area of the 
HTML page is not initially 
displayed, so it needs to have 
its dispLay style changed. 
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modify the HTML 


The final step is to modify the HTML form 
page so that the JavaScript will work. 


<titLe>EmpLoyees by Department</title> 

<script src="ajax.js" type="text/javascript"></ 
script> 

<script src="dept.js" type="text/javascript"></ 
script> 

<style type="text/css" media="alL">@import "style. 
css';</style> 
</form> 





EW Include the two JavaScript 
pages in this page. 


</form> 
<div id="resuLlts"></div> 
</body> 
</html> 


BY create a div section with an id 
of results. The results returned by 
the Ajax request will go here. 
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test the Ajax layer 





Now that all of the work is done, it’s time to see how things 
turned out. (See extra bits on page 42.) 


E¥ Load the HTML—(@66 Employees by Department OO 
page in your Web @ re /Mocalhost/ajax/dept. form.htm) ve | 


browser. 


i Select a department and click 'GO' to see the employees in that department. 


The address must | | Human Resources >| _CO | 
begin with http:// 


for this to work. 













___Employees by Department _ ica 
| "ng eee ame e geem | 





| Select a department and click 'GO' to see the employees in that department. 





Human Resources» 
Accounting 
Marketing 
Redundanc Department 


BY select a depart- 
ment and click GO. 


Eq The HTML page—— [@0€ ____ Employees by Department 
should show the | 
results without 
going to a new 
page or reloading 
this page. 


Marketing 


BARNES, HENRY 
Email: henry @thiscompany.com 


Phone Extension: 38 


FISHER, SAM 
Email: sam@thiscompany.com 
Phone Extension: 385 


1 | WOOD, ELEANOR 
| Email: eleanor@thiscompany.com 
Phone Extension: 387 





38 browsing using Ajax 


check for Ajax support p. 2s 
e Theajax.js file, which defines the 





- The function's S name can contain : 
: a utes and the oo 










: Pee as an existing k keyword i in 
2 boca a - 


> “nen it’s called thoes would 190, - 
oS Cees do is paren eR 
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getXMLHttpRequestObjectC) 
function, is the most important 
script in any Ajax application. The 
function returns either a valid, 
browser-safe XMLHttpRequest 
object or the value faLse. If it 
returns the object, that object con- 
tains all the functionality required 
to perform an Ajax transaction. 


The latest versions of most 
browsers support the 
XMLHttpRequest object. Due 
to its increasing popularity, this 
should remain so, even though 
it’s not part of any standard at 
the time of this writing. 


Internet Explorer versions 5 

and 6 didn’t support a Java- 
Script XMLHttpRequest ob- 
ject. Instead they supported an 
ActiveX object of type XMLHTTP. 
Unfortunately, if users with one 
of these versions of Internet 
Explorer have disabled Activex 
support (enabling it is a secu- 
rity risk), they cannot use Ajax- 
enabled applications like these. 
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call the function p. 29 


e The window. onLoad property 
tells the JavaScript the name of 
the function to call once the page 
has completely loaded. In this 
case that’s Lnit, short for 
initialize (i.e., set things up). 

e The benefit of calling the initializa- 
tion function in this way (rather 
than just calling it directly) is that 
the downloading and drawing of 
the page in the Web browser won't 
have to wait for the JavaScript to 
do its thing. In a slight way, this 
makes for a better user experience. 





these is 4, cohen means s that the: 
_ transaction is s complete. | 





| 2 he 0 One of — aciatere is i 
 open(). Provide this function 
aS wie ther name o oft the page where x 
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print the employees p.2: 





tke dept_results 
‘Chapter 2. The main difference - 


_ <head>, and <boc 














_ This PHP script is almost exactly 
php from 



























is that it does not include the 
opening and closing <htmL>, 

dy> tags, nor. 
does it include most of the stuff. 
that goes within those tags. The 
reason why is that all of this - 

















page's results will be inserted into 


the HTML page via JavaScript. 
That page already has the proper 
HIME tags. 





handle the response p. 35 


In the init© function, we tell 
the JavaScript to call a func- 

tion called handLeResponse(C) 
whenever the readyState 
value changes. This value will 
change multiple times during an 
Ajax request, so this function will 
be called multiple times. 


The XMLHttpRequest status 
attribute stores the HTTP status 
code returned by the server-side 
page. There are dozens of status 
codes from 200, meaning that 
everything was OK, to values 
over 500, which are normally 
server errors. A status code of 
304 indicates that the page was 
found but had not been modi- 
fied since a certain date and time. 
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For the purposes of these exam- 
ples, we'll assume it means the 
response was fine. 


By referring to the Document 
Object Model, we can forcibly 
submit the form. The document. 
getELementByIdC 'dept_ 
form") code refers to the form 
(which has an 1d value of dept_ 
form). The .submitQ) part of 
the code submits it. 
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° The process of hiding, then show- 
- | ing the results area using CSS and 
- JavaScript is intended to make it 


more obvious when the HTML 


page is updated. | 


Referring to an element's 





innerHTML value is a quick way 
to place next text on a page. An 


_ alternative is to add nodes to the 
DOM. You'll see this in Chapter 7, _ 


“enabling an Ajax search.” 


test the Ajax layer p.:s 


A 


Debugging Ajax applications can 
be particularly tricky because 
there are so many technologies 
involved: HTML, DOM, CSS, 
JavaScript, PHP, SQL, and MySQL. 
See Appendix A, “where to go 
from here,” for debugging tips. 


You'll want to test any Ajax appli- 
cation in as many Web browsers 
On as many operating systems 

as possible. By knowing how the 
application behaves under mul- 
tiple settings, you do your best to 
avoid exluding any users. 

Firefox is, in my opinion, the best 
browser to test Ajax applications 
in. It has a JavaScript console 
that opens in another window 
for displaying JavaScript errors. 
This alone can be a great help. 


browsing using Ajax 





4.adding records 





In the first chapter we created the database structure for this employee list- 
ing Web site. In the previous two chapters, we developed an Ajax as well as a 
non-Ajax approach for browsing the employees by department. In this chapter, 
let’s create a way to add employees to the database. Naturally we'll start with 
the non-Ajax version, for universal accessiblity, and then add the Ajax-enabled 
version in the next chapter. 


To begin, we'll start by creating the HTML form that takes all the requisite 
data. Then we'll write the PHP script that handles the form submission ina 
non-Ajax way. This will all be fairly basic PHP form handling. 
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what we'll do 














1 First, on pages 45-48, we'll Use this form to add an employee (all fields are required): 
create an HTML page with a 
form. 
FIRSTNAME 
representing all of the data oO 
that’s stored in the database EMAILADDRESS, sy 








for each employee. 


DEPARTMENT Human Resources 


PHONEEXTENSION, 





On non-Ajax-enabled browers, 
when the user clicks Add, 

the form will be submitted 

to a PHP script. 


Add an Employee 











The following errors occurred: 
2 On pages 49-54, the PHP 
script that handles the HTML 
form will be written. The script 
validates the form data and 
reports on the results. 


« Please enter a valid first name. 

e Please enter a valid last name. 

« Please enter a valid email address. 

« Please enter a valid phone extension. 


If any fields weren't properly 
filled out, the PHP script prints 
an error message. 


3 Naturally, we'll test what At the end of this chapter, in the 
we've built to make sure it all extra bits section, you'll find more 
works. information, tips, and recommen- 


dations regarding all these steps. 


In the next chapter, we'll add the 
Ajax layer to these pages. 
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start the HTML page 


Start by creating anew HTML page in your HTML editor. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// 
EN" 
“http: //www.w3.org/TR/xhtmL1/DTD/xhtml1-strict.dtd"> 
<html xmLns="http://ww.w3.org/1999/xhtmL" xm1L: 
Lang="en" Lang="en"> 
<head> 

<meta http-equiv="content-type" content="text/html ; 
charset=utf-8" /> 

<title>Add an Employee</title> 

<style type="text/css" media="all">@import "style. 
css" ;</style> 
</head> 
<body> 
</body> 
</html> 


The title will reflect what this page is for. 


The style sheet will give this 
page the same look as the other 
pages in the site. 


EMAILADDRESS| 


DEPARTMENT Human Resources = -¥ 
een 


Add 
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add the form 


EW Add a message indicating what the 
form is for and how it should be used. 








<body> 

<p>Use this form to add an employee Call fields are 
required) :</p> 

<form action="add_empLloyee.php" method="post" 1d="emp_ 
form"> 

</form> 

</body> 


BY For non-Ajax-enabled browsers, 
the form will be submitted to add_emp Loyee. php, 
to be written next. 


Eq The form uses the POST 
method, not GET. (See extra 
bits on page 57.) 


4) For the Ajax layer, the 
form's id value of emp_form 
will be important. 
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add the form elements 


EW Text inputs take the employee’s first 
name, last name, and email address. 


<form action="add_empLoyee.php" method="post" 1d="emp_ 
form'> 

<p><Label class="title" id="first_name_Label">First Name 
<input type="text" id="first_name" name="first_name" 
/></lLabel> </p> 

<p><Label class="titLe" id="Last_name_Label">Last Name 
<input type="text" 1d="Last_name" name="Last_name" /></ 
Label> </p> 

<p><Label class="title" 1d="email_lLabel">Email Address 
<input type="text" id="emaiL" name="emaiL" /></Label> 
</p> 
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add the form elements 





FP] A drop-down menu will allow the user to select the employee's department. 
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<p><Label class="titLle" 1d="department_1d_ 
labeL">Department <select 1d="department_id" 


name="department_1id"> 


<option vaLlue="1">Human Resources</option> 
<option value="2">Accounting</option> 

<option value="3">Marketing</option> 

<option vaLlue="4">Redundancy Department</option> 


</select></Label> </p> 


E} Another text input is for the employee’s phone extension. 


<p><Label class="title" i1d="phone_ext_Label">Phone 
Extension <input type="text" id="phone_ext" name="phone_ 


ext" /></Label> </p> 


<p><input name="add" type="submit" value="Add" /></p> 


</form> 


EJ Labels are added to indicate 
what each element is for. (See 
extra bits on page 57.) 


Eq The submit button has a value 
of Add. 


[J Save this file as add_empLoyee. 
html and place it in the same direc- 
tory as all the other site pages. 





FIRSTNAME,| 


maumane 





PHONE EXTEN (counting 
Marketing 


‘Redundancy Department _ 
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start a PHP page 


The first PHP page handles the non-Ajax form submission. It should also be a 
valid HTML document, so start with those tags. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.@ Strict//EN" 
"http://www .w3.org/TR/xhtmL1/DTD/xhtmL1-strict.dtd"> 
<html xmLns="http://www.w3.org/1999/xhtmL" xml: lang="en" 
Lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html ; 
charset=utf-8" /> 
<titLe>Add an Employee</titLle> 
<style type="text/css" media="alL">@import "style. 
css" ;</style> 
</head> 
<body> 
<h1i>Add an EmpLoyee</h1> 
<?php # add_empLoyee. php 
require_onceC'mysgql.inc.php'); 
mysql_close($dbc); 
?> 
</body> 
</html> 


All of the page’s functionality will go in between the PHP tags. 


This page will need to communicate with MySQL, so the 
mysqL.inc.php script must be included. 


The MySQL connection is closed before the script 
terminates. 


This file must be saved as add_empLoyee. php and placed in the 
same directory as add_empLoyee.html. 
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if ClemptyC$_POST['email'])) { 

$e = mysqlL_real_escape_string($_POST['email'"], 
$¢dbc); 
+ else { 

$errors[] = "email address'; 


$ 


FE} To make sure the data is safe to use in 
a query, text inputs are run through the 
mysqL_real_escape_string() function. 
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validate the form data cont) 


if CissetC($_POST['department_id']) && is_numericC$_ 
POST[ 'department_id']) && C$_POST['department_id'] > 
Q)) It 

$did = Cint) $_POST['department_id']; 
+ else { 

$errors[] = ‘department' ; 


$ 


2] Numeric values, like the department ID and the phone 
extension, must be positive numbers. 


if Cisset($_POST['phone_ext']) && is_numericC$_ 
POST['phone_ext']) && C$_POST['phone_ext'] > @)) { 
$ext = Cint) $_POST['phone_ext']; 
+ else { 
$errors[] = ‘phone extension'; 


$ 
mysql_close(C$dbc) ; 


Ey To make them safe to use in a query, numeric 
values are type-cast as integers. 


[J Any failed validation routine results in an element 
being added to the $errors array. 
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update the database 


Assuming that the form data passed all the validation routines, an INSERT 
query should be run. 


EW if there were no errors, this conditional will be true (because the 
$errors variable will be empty). 


$errors[_] = ‘phone extension'; 


} 
if C!$errors) { 

$q = "INSERT INTO employees VALUES CNULL, $did, 
"$fn', "$Ln", "$e", $ext)"; 

$r = mysql_query($q, $dbc); 

if Cmysql_affected_rows($dbc) == 1) { 

echo "<p><strong>The employee has been added.</ 

strong></p>'; 
mysqL_close($dbc); 


EF The INSERT query adds the new employee to the database using the 
purified data from the validation routines. (See extra bits on page 58.) 


Eq The mysql_affected_ 7 | eee 
rows() function returns the ‘> Add an Employee - Windows Internet Explorer [- (a) x| 
number of, well, affected CBE) ~ [el neeoiiiise.t68.0.1028]/#9|[%) [cooge 


scree 


rows. For this script’s query, 
the number of affected rows 
should be 1, as one new 
record should be added. 


4 The results are reported | 
to the user. : The employee has been added. 
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errors 





Finally, indicate to the user what problems occurred, if applicable. 


EY The first else clause applies if the query did not result in one affected 
row. This would normally be the result of a syntax error. (See extra bits 
on page 58.) 


echo '<p><strong>The employee has been added.</ 
Sstrong></p>' ; 
+ else { // Query failure. 
echo ‘<p class="error">The employee could not be 
added due to a system error.</p>'; 


} 
+ else { // Errors! 
echo ‘<p>The following errors occurred:</p><ulL 
class="error">'; 
foreach ($errors as $e) { 
echo "<Li>Please enter a valid $e.</lLi>\n"; 
} 


echo '</ul>'; 


$ 
mysql_close($dbc) ; 








EY The second else clause 
applies if the data didn’t pass 
all the validation tests. 


Add an Employee 


The following errors occurred: 


EF} Because the errors are 
stored in an array, looping 
through them is the easiest 
way to access them all. 


e Please enter a valid first name. 

» Please enter a valid last name. 

e Please enter a valid email address. 

« Please enter a valid phone extension. 
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test the non-Ajax version 





EW Load the HTML page in your Web browser to test what we’ve 
created so far. 






The address must begin with http ://— C had an Employee - Windows internet Explorer JC 
for this to work. = 







ligt Page + 







2 Fill out the form incompletely and 
click Add. 





provovececerecesenssecvereesesensvsosenseveunroeseseessenrersorsseg 


| PHONEEXTENSION ct 


Add an Employee | 


| The following errors occurred: 


+ Please enter a valid first name. 
e Please enter a valid email address. 
« Please enter a valid phone extension. 





Eq} The PHP page should show the results. 
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test the non-Ajax version 









(- (Ox) 





72 Add an A a Windows Internet st Es ores 
























: File Edit View " Faworkes ade. Help 





| Use this form to add an employee (all fields are required): 


| FIRSTNAME Lary 
| LASTNAME Ullman 


[rttssaseceseanssecsseessessenssasesssnessssceesseseensssnsnssonnsiscsiansssanasnsnanensng 


4) Go back to the form, fill it out | DEPARTMENT | Human Resources 


completely, and click Add. 






| PHONE EXTENSION 123 | 


File. Edit View Favors Tools — 


Pe Add an «ieanieine 


! The employee has been added. 





Ey Again, the PHP page shows the results. 
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"add the form el tspo 


= The form’ S labels will serve two | 
purposes, First, they indicate to 





the user what each form element — 


__ is for. Second, they’ll be modi-. 


fied, using JavaScri pt, to indicate | 


an error in the a enabled ver- 
sion. | of this form. 


adding records 





validate the form data »p.50 


How you validate form data 
depends on the data’s type (num- 
bers, strings, etc.) and expected 
values (positive number, email 
address, and so on). For validat- 
ing a person’s name, it’s often 
sufficient to make sure that some 
value is entered. 


A more thorough validation of an 
email address would be to con- 
firm that it matches a regular 
expression pattern. You can do 
this with email addresses more so 
than names because they must 
abide by strict rules. 


You could improve the security 
of this system by applying PHP’s 
strip_tagsQ() function to the 
text inputs. That function can 
help prevent cross-site scripting 
attacks (XSS). 


The mysql_real_escape_ 
string) function provides 
language-specific protection on 
text used in queries. 
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update the database p53 _ 
¢ Amore precise way to write the _ 
_ INSERT query would be to use - 
the syntax where you specify the 
columns involved. For this query, — 
that would be INSERT INTO | 
employees Cdepartment_id, 
first_name, Last_name, 
email, phone_ext) VAL- 
UES C$did, ‘$fn', oun, 
$e’, $ext). | 


report any errors p.54 


e To debug any PHP—MySQL prob- 
lems, you'll need to print out the 
query to inspect its syntax. You 
should also invoke the mysqL_ 
error() function to see what 
problems the database reports. 


e Live sites should never provide 
detailed behind-the-scenes 
errors, such as the queries being 
run or the MySQL errors. Use this 
information for debugging pur- 
poses, and then hide that infor- 
mation in the live version (which, 
we hope, shouldn’t encounter 
such errors). 
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5. adding records 
via Ajax 





In the previous chapter, we created a way to add employees to the database. 
That process required one HTML form and one PHP script that handled the 
form. It all works fine but in the old-fashioned, client-server kind of way. 


In this chapter, let’s set an Ajax layer on top of those scripts so that, for the 
browsers that support it, our form for adding employees can behave more like a 
desktop application. To do so, we'll need to slightly modify the HTML page. 
Then we'll create one JavaScript file that has the page-specific Ajax function- 
ality. Finally, anew PHP script will be written that handles the Ajax request. 


This example will also introduce two new techniques: sending an Ajax request 
using the POST method and working with XML data. This Ajax example is 
a little more complicated than the previous one, but it should all make sense by 
the end of the chapter. 
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what we'll do 





EY First, on pages 62, we'll modify the HTML page to 
include the necessary Ajax pieces. 


2. On Ajax-enabled browers, when the user clicks 
Add, the page-specific JavaScript will read in all the 
form data and submit it to a new PHP script. On pages 
63-66, we'll begin the JavaScript file that starts this 
process. 


EQ the PHP script, written on pages 67-74, will vali- 
date all the data and report on the results. Its response 
will be returned as XML. 


EY The JavaScript will take the XML returned by the 
PHP script and use it to update the HTML page. We'll 
complete this file on pages 75-79. 


G Naturally, we'll test what we've built to make sure 
it all works. 


Gi At the end of this chapter, in the extra bits section, 
you'll find more information, tips, and recommenda- 
tions regarding all of these steps. 
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HTML page 


Use this form to add an employee (all fields are required): 


| FIRST NAME [ 


| LAST NAME 
| EMAIL ADDRESS ~~ 
DEPARTMENT | Human Resources 


| PHONE EXTENSION 7 





Form data 


XML data 





Use this form to add an employee (all fields are required): 


Please correct problems with the 
highlighted field(s) below. 


First Name | 
| LastName _ 
Email Address - 
DEPARTMENT | Human Resources 


| Phone Extension 
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Ajax elements 





Ey Include the generic Ajax JavaScript file by adding the 
right code to the HTML head. (See extra bits on page 82.) 


<title>Add an EmpLoyee</titLle> 

<script src="ajax.js" type="text/javascript"></script> 
<script src="add_empLloyee.js" type="text/ 
javascript"></script> 

<style type="text/css" medtia="all">@import "style. 
css'3</style> 


Eq Include the page-specific Ajax JavaScript file by adding 
that code to the HTML head. We'll start making this script 
next. 


EF} Add a DIV to the HTML page to report upon the results. 


<p>Use this form to add an employee Call fields are 
required): </p> 

<div 1d="resuLlts"></div> 

<form action="add_empLoyee.php" method="post" id="emp_ 
form"> 


EY save the file (it will continue to use the name add_empLoyee.htm1). 
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the Ajax layer 





Create a new JavaScript file that starts with the following code (see extra bits 
on page 82): 


EW The first line tells the Web browser to run the init() function after 
loading the entire page. The tnitC) function sets up all the Ajax activity. 


window.onload = init; 
function tnitd) ¢{ 
var ajax = getXMLHttpRequestObjectQ); 


EY The function calls the getXML- FE} The function then checks to 
HttpRequestObject() function see if the ajax variable has a valid 
to get a valid, browser-specific value. With supported browsers, 
object. This function is defined in ajax will be an XMLHttpRequest 
ajax.js, which will have already object. With nonsupported brows- 
been included by the HTML page. ers, ajax will have a value of 

false, and this conditional will 

be false. 





if Cajax) { 
if Cdocument.getELementByIdC'results')) { 
document. getELementByIdC'emp_form').onsubmit = 
functiond) { 


ZY Next, the function checks to EW Finally, an onsubmitQ event 
see if the browser supports the is attached to the form (which has 
document object model (DOM) an id value of emp_form). In other 
and, specifically, if the page has an words, when the form is submit- 
element with an 1d of results. ted, do the following.... 
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set up the Ajax 


document.getELementByIdC'emp_form').onsubmit = 
functiond) { 
ajax.openC'post", ‘add_empLoyee_xml.php"); 
ajax.onreadystatechange = function() { 
handlLeResponse(ajax) ; 


} 
EY Tell the ajax object that you PY Provide to the ajax object 
want to use the POST method. the name of the page that 
(See extra bits on page 82.) should be sent the request. This 


is add_empLoyee_xmL . php, to 
be written next. 


E} When the ajax object’s readyState value 
changes, the handLeResponse(_.) function should be 
called, passing that function this same object. 
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prepare the form data 


EY The fields variable is an array of the form elements whose values 
need to be sent to the PHP page. 


2 Loop through each element in the array. 


EF} In the loop, each array element will be turned into a string in the for- 
mat name=va Lue. So the first array element, first_name, will be turned 
into something like first_name=Larry. (See extra bits on page 83.) 


handLeResponse(Cajax); 
} 
var fields = ['first_name', "Last_name', ‘email’, 
"department_id' , "phone_ext"]; 
for (var i = 0; 1 < fields.Length; i++) { 

fields[i] = fields[i] + "=" + 
encodeURIComponent(document.getELementByld(fields[1i]). 
value); 
} 
var values = fields. joinC'&'); 
ajax.setRequestHeader('Content-Type', ‘appLication/x- 
www-form-urLencoded' ); 


EY In the loop, each form element's value is retrieved using 
the Document Object Model. The value is run through the 
encodeURIComponent() function for security purposes. 


EE Outside of the loop, all of the array elements (the name=vaLue pairs) 
are joined together with ampersands. The end result is a string like 
first_name=Larry&Last_name=U1 Lman&... 


[J The Content-Type header indicates what kind of information is 
about to be sent. The value appLicatiton/x-ww-form-urLencoded 
means that the content is encoded form data. 
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EW After all the data handling, the actual 
Ajax request is made. The form data, rep- 
resented by the variable vaLues, is used as 
the only argument to the send() method. 
(See extra bits on page 83.) 


ajax.setRequestHeader('Content-Type' , 
'applLication/x-www-form-urlencoded' ); 
ajax.send(vaLues); 
return false; 
} // End of anonymous function. 
+ // End of DOM check. 
+ // End of ajax IF. 
+ // End of initd) function. 


BP} Finally, the function returns a value of false to 
tell the Web browser not to actually submit the form 
(since Ajax is handling the form submission). 


Save this file as add_emp Loyee. js 
and place it in the same directory on 
your Web server as every other file. 
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prepare for XML 


A new PHP script will do the same thing as add_empLoyee. php, only it will 
return all of its results as XML data. This data will be handled by the JavaScript 
in the Web browser. Start a new PHP script in your text-editing application. 


EY This PHP page will not be viewed in the Web browser, so it 
begins with the opening PHP tag, not with HTML. (See extra 
bits on page 83.) 


BY The header() function is used to send meta-information 
(i.e., Not actual data). Here the header) function sends a 
Content-Type of text/xml. In layman’s terms, this is a way of 
saying that XML data should be expected to follow. 


<?php # add_empLoyee_xml .php 
headerC"Content-Type: text/xml" 

echo ‘<?xml verston="1.0" encoding="utf-8" 
Standalone="yes" ?> 

<response> 





b] 


FE} XML data begins wth the declaration. 


ZY All XML documents have one root element. This can be 
a made-up value, like response here. 
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validate the form data 








The form data must be validated prior to using it in a query. Add this code to 
the PHP page. 


EW The Serror variable will be a flag, indicating if an error occurred. 


<response> 
require_onceC'mysqL.inc.php"); 


$error = false; 
7 Clempty($_POST['first_name"])) { 


2 Text inputs will be validated by confirming that they aren’t empty. 
(See extra bits on page 84.) 
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3 TO make sure the data is safe to use in a query, text inputs are 
run through the mysql_reaL_escape_string() function. 


$fn = mysql_real_escape_string($_POST[' first_name' ], 
$dbc); 
+} else { 

$error = true; 

echo '<error>first_name</error> 


Ve 
b] 


} 
if ClemptyC$_POSTL'Last_name'])) { 
$Ln = mysql_real_escape_string($_POST[' Last_name" ], 
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validate the form data (cont, 





+t else { 
$error = true; 
echo '<error>Last_name</error> 


Vo. 
b] 


} 
if ClemptyC$_POST['email'])) { 
$e = mysql_real_escape_stringC$_POSTL" email" ], 
$dbc); 
+ else { 
$error = true; 
echo '<error>email</error> 


Vo. 
b] 


5 
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4 Numeric values, like the department ID and the phone extension, 
must be positive numbers. 


EY To make them safe to use in a query, numeric values are type-cast 
as integers. 


if Cisset($_POST['department_id']) && is_numeric($_ 
POST['department_id']) && C$_POST['"department_id'] > 
Q)) t 

$did = Cint) $_POST['department_id']; 
+ else { 

$error = true; 

echo '<error>department_1d</error> 


Ye. 
| 


} 
if CissetC$_POST['phone_ext']) && is_numeric($_ 
POST['phone_ext']) && C$_POST["phone_ext'] > @)) { 
$ext = Cint) $_POST['phone_ext"]; 
+} else { 
$error = true; 
echo '<error>phone_ext</error> 





[J Any failed validation routine results in the $error variable being set 
to true. 


7 To report the error back to the JavaScript, an XML element is created 
with a name of error. The value of the XML element is the name of the 
form element improperly filled out. 
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update the database 








Assuming that the form data passed all the validation 
routines, an INSERT query should be run. 


EW if there were no errors, then this conditional will be true 
(because the $error variable will be false). 


EY The INSERT query adds the new employee to the database 
using the purified data from the validation routines. 


echo '<error>phone_ext</error> 
Y. 
b] 


$ 
if C!$error) { 
$q = "INSERT INTO employees VALUES (NULL, $did, 
"$fn', "$ln', "$e", $ext)"; 
$r = mysql_query($q, $dbc); 
if Cmysql_affected_rows($dbc) == 1) f{ 
echo '<resulLt>The empLoyee has been added.</result>' ; 





EJ The mysql_affected_rows() function returns the 
number of, well, affected rows. This should be 1, as one 
new record should be added. 


o- <response> 


| <result>The employee has been added.</result> 
| </response> 





EY The results are added to the XML output, 
using an element name of result. 
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complete the XML 





EW The first else clause applies BE] The second else clause 
if the query did not result in one applies if the data didn’t 
affected row. A syntax error pass all the validation tests. 


would typically be the cause. 
(See extra bits on page 84.) 


echo '<result>The employee has been added.</ 
result>'; 
+ else { // Query failure. 
echo '<resuLt>The employee could not be added due 
to a system error.</resuLt> 


3 


} 
+ else { // Errors! 

echo ‘'<result>Please correct problems with the 
highlighted field(s) below.</result> 





3 


} 
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complete the XIVIL (cont.) 





mysql_close($dbc) ; 
echo '</response>' ; 
?> 


|- <response> 

: <error>first_name</error> 
<error>last_name</error> 
<error>email</error> 
<error>phone_ext</error> 


- <resu 

Please correct problems with the highlighted field(s) below. 
q </result> 
| </response> 





FE} For both else clauses, an appropriately 
descriptive message is included in the XML 
output, within an element called result. 


EY close the root XML element to complete 
the XML output. No need to use closing 
HTML tags! 
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handle the response 


The PHP page sends back XML data, which must be handled by 
the JavaScript. Add this new function to the add_empLoyee. js 
JavaScript file. (See extra bits on page 85.) 


EY This JavaScript function is called when the 
ajax object’s readyState value changes (see 
the tnitQ) function). The function receives 
the ajax object when called. 


function handleResponse(Cajax) { 
if Cajax.readyState == 4) { 
if CCajax.status == 200) || Cajax.status == 304) ) 


EY The function shouldn't do anything until 
readyState has a value of 4, meaning that 
the Ajax transaction is complete. 


EF} If the status code is equal to either 200 or 
304, we can use the returned results. 
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prepare the page 








Eq The results variable now refers to 
a specific area in the DOM (Document 
Object Model) of the HTML page. 






if CCajax.status == 200) || Cajax.status == 304) ) { 

var results = document.getELementBylIdC'results'); 

document. getELementByld('first_name_LabelL"). 
className = ‘title’; 

document ..getELementById(' Last_name_LabelL').cLassName 
= ‘title'; 

document .getELementByIdC'"email_Label').className = 

"title'; 

document. getELementById('department_id_LabeL"). 
className = 'titLe'; 

document. getELementById("phone_ext_Label ") . className 
= 'title'; 





BY Each of the form’s labels should have 
its class reset to the default class of 
title. (See extra bits on page 85.) 
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handle the XML 


EY The XML data returned by the PHP script can be accessed via ajax. 
responseXML, which we assign to a variable called data. (See extra 
bits on page 86.) 


EY The variable message will refer to the XML element with a tag 
name of result. 


document .getELementById( 'phone_ext_Label').className 
"title'; 

var data = ajax.responseXML ; 

var message = data.getELementsByTagNameC result"); 
var errors = data.getELementsByTagName('"error'); 

var temp = false; 


Eq The variable errors will 
refer to every XML element 
with a tag name of error. 
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handle the XML cont, 


EY Loop through the errors array to access every one. 








. (var 1 = @; i < errors. Length; i++) { 

temp = errors[1].firstChild.nodeVaLue; 
document. getELementById(temp + '_label').className = 
‘error’; 


5 








Ey A temporary variable will 
be assigned the value of the 
error from the XML data. 


| FIRST NAME (Lary 







; Last Name 
[J The error value is used 
to change the class of the 
corresponding form label. 





| Email Address 


DEPARTMENT | Human Resources i 
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display the results 


The final step in the Ajax process is to display the results message 
by placing that message on the HTML page. This code completes 
the handLeResponse() function. (See extra bits on page 86.) 


EW The text in the results area is set to the 
returned response from the Ajax request. 


document.getELementById(temp + '_lLabel').className = 
‘error’; 
} 
resuLts.innerHTML = message[0].firstChild. 
nodeVaLue; 
results.style.display = 'block'; 
+ else { 
document .getELementByIdC'emp_form").submitQ); 
} 


+ // End of readyState IF. 
+} // End of handleResponse() function. 










EF] Because the results EW |f we didn’t get a valid status code back 
area is initially invisible, we from the Ajax request, we should formally 
need to make it visible now submit the form to the handling PHP page 
that we have some results (as if the Ajax layer didn’t exist at all). 

to display. . 





Use this form to add an employee (all fields are required 


j| Please correct problems with the 
| |_highlighted field(s) below. _ 


| FIRST NAME ‘Lara 





):| 
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test the Ajax layer 





EW Load the HTML page in your iano a 
@ http: / /powerbook.local/ajax/add_employe 
We b b rowse ie ‘ SS SS ice 


Use this form to add an employee (all fields are required): 
The address must begin with 
http:// for this to work. 


| LAST NAME 
| EMAIL ADDRESS 
| DEPARTMENT (aman esources 


| (aa) 





: Use this form to add an employee (all fields are required): 


— BAFill out the form incompletely or 
— | improperly and click Add. 


| EMAIL ADDRESS 





DEPARTMENT ( Human Resources cS 


PHONE EXTENSION obviously nota number | 


fadd > 





Use this form to add an employee (all fields are required): 


Please correct problems with the 





| _highlighted field(s) below. — 
E} The HTML page should show | i 
the results without reloading the | Last Name 
page or going to a new page. | Email Address 





| Phone Extension obviously nota number 


| (Aaa) 
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ZY Fill out the form completely and click Add. 


adding records via Ajax 


1 Use this form to add an employee (all fields are required): 
7 | Please correct problems with the 

7 | highlighted field(s) below. 

| FIRST NAME ‘iar 


Last Name utiman 


| Email Address ‘me@exampie.com 


1 Phone Extension 902 


| ca) 


| Use this form to add an employee (all fields are required): 
| 

FIRST NAME tarry 

| LAST NAME ‘iiman 


| EMAIL ADDRESS ‘megexampie:com 


| PHONE EXTENSION (902 


eer 


9 (Add 





add the Ajax elements p. «2 set up the Ajax p.« 


e The ajax.js file, written in enep e The POST method should gener- 

ter 3, “browsing using Ajax,” | ally be used when the form’s 
defines a function that returns a submission should have an effect 
browser-specific XMLHttpRe- on the site. For example, using 
quest object. This file is needed the add-an-employee form adds 

_ by any page that performs any another record to the database. 

Ajax operations. e The GET method should gener- 

e Because the DIV, where the ally be used when requesting 
results will be reported, has an information—for example, when 
id value of results, it willbe requesting the employees ina 
formatted according to the rules specific department. 


dictated in style.css. This is 

the same as the results DIV in 

dept_form.html. For starters, the 
_ DIVwill be hidden when the page 

is first viewed. 


apply the Ajax layer p.«3 

e Most of this code is exactly like 
that in dept. js. You'll find that 
to be the case with a good Ajax 
base, like the one we've devel- 
oped in this book. The only 
change in this first bit of code is 
the reference to emp_form. It’s 
in the rest of the code—what 
should be done when the form is 
submitted—that the big differ- 
ences can be found. 
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complete the function p. «6 


e When using the GET method, use 
the value null as the only argu- 
ment when calling sendQ). Any 
data sent over GET is appended 
to the URL itself. When using 
POST, you need to provide the 
data when you call sendQ), as it’s 
not sent in the URL. 


prepare for XML p.«7 


e The PHP script sends its response 
as XML data, not as a normal 
Web page. Everything PHP will 
print will be part of this XML. 


e The XML data being created is 
really like the data in an HTML 
page, where there’s one root ele- 
ment and any number of nested 
subelements. For this example, 
the root element will be called 
response and there will be two 
subelements. There can be zero 
or more elements called error 


oo ou wante a +6 send MAL date. and there will always be exactly 
to the PHP script, you would set one element called result. In 


ae the Content-Type t to > text rail. | comparison, an HTML page has 
. : a root element called html, two 


subelements named head and 
body, and more subelements 
within those. 
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e If the PHP page does not use the 
headerQ) function to set the 
Content-Type, the JavaScript 
that receives this response will 
not recognize it as XML. 


e You don’t have to fully under- 
stand XML to do this example 
or to use XML in general. But 
should you want to better under- 
stand the subject, search the 
Web for more information. 


validate the form data p.sz 


-e« For more information on the 


form validation routines, see the 
extra bits section for Chapter 4, 
“adding records.” — 


+ The XML data will have zero or 


_ more elements called error. Any 

_ failed validation will result in 
another error element, whose 
value will match the name of the 

corresponding form field. The 

point of this XML data is to indi- 
cate which form fields weren't 
properly filled out. If all of the 
validation tests were passed, 
there will be none of these 
elements. 


a4 


complete the XML p.73 
e Todebug any PHP-MySQL prob- 


lems, you'll need to print out the 
query to inspect its syntax. You 
should also invoke the mysqL_ 
error() function to see what 
problems the database reports. 


A useful debugging technique 
when working with XML data is 
to verify that your PHP script is 
returning valid XML. To see the 
result of the PHP page, either 
use JavaScript to access ajax. 
responseText (in the handle- 
Response() function) or 
submit your form to the PHP 
page directly (without using 
JavaScript). 


For directly viewing XML in your 
Web browser, you'll want to 

use a browser that supports the 
format. At the time of this writ- 
ing, this includes recent versions 
of Internet Explorer and Firefox, 
but not Safari. 
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handle the response p.75 


e Inthe initQ function, we tell 
the JavaScript to call a func- 
tion called handLeResponse() 
whenever the readyState value 
changes. This value will change 
multiple times during an Ajax 
request, so this function will be 
called multiple times. 


e The XMLHttpRequest status 
attribute stores the HTTP status 
code returned by the server-side 
page. There are dozens of status 
codes—from 200, meaning that 
everything was OK, to values 
over 500, which are normally 
server errors. A status code of 
304 indicates that the page was 
found but had not been modified 
since a certain date and time. 
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handle the XML ».77 e To indicate a problem with a 
e The server's response is avail- form element, its correspon- 


able in two attributes of the ding label will have its class 


XMLHttpRequest object. It changed from title to error. 
can be found as plain text in Using the Document Object 


responseText or as XML data Model, GocuNen- A eg ge a 
in responseXML. ById(temp + '_Label") will 


refer to the label (where temp 
: The XML data can be accessed stores the name of the form ele- 
just like an HTML page, using 


ment). Then .cLassName lets you 
the Document Object Model. So ) y 
change its class. 
data.getELementsByTagName 
C'error') refers to every item 


in the XML data with a name of display the results p. 79 
edad e The message variable refers to 

¢ The syntax of the for loop is a every XML element with a name 
common way to access every of result (see the code earlier 
item found in an array. Within in the function). Even though 
the loop, the specific array item the XML data will only ever have 
is accessed via arrayname[i]. one such element, an array is 

e« The error elements in the XML still returned. So the text itself is 
data have the names of the accessed via the unwieldy mes- 
problematic form elements as sage[Q@].firstChild.nodeVaLue. 
their values. To access these val- ¢ As with the previous Ajax exam- 
ues, refer to the error element, ple, the innerHTML property is 
which is errors[i] within the used to put a message within the 
loop, followed by .firstChild. results DIV. 


nodeVaLue. It’s a rather com- 
plex syntax but it works. More 
information on a child and a 
node can be found in Chapter 7, 
“enabling an Ajax search.” 
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6. creating a search 


Thus far in the book we've made two aspects of an employee-directory site. 
First, we created a way to browse employees by department. Then we made it 
possible to add employees to the database. Let’s put in one last logical feature: 
the ablity to search for employees by last name. 


In keeping with this book’s approach, we'll start, in this chapter, with the non-Ajax 
version. These files will work for all users and give us a sense of what the process 
should entail. To create the search, we only need to put together two files: one 
HTML form and one PHP script that handles the form. Should be a snap! 
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what we'll do 











Ey First, on pages 89-91, we'll create an HTML page with a form. 







The form has only one 
input: a text box where an 
employee's last name, or part 
thereof, can be entered. 


Enter the first letter or two of an employee's last name and 
click 'GO' to find matching employees. 






On non-Ajax-enabled browers, when the user clicks GO, 
the form will be submitted to a PHP script. 


Eq On pages 92-95, the PHP script that handles the HTML form will be 
written. The script uses the form data to perform a search on the database, 
printing the results. 


Employee Search Results 









SANDERS, JUSTINE 
Department: Accounting 


| sanders@thiscompan cor 










If no employees match 
the search term, the PHP 
script prints a message 
saying as much. 





SMITH, LAILA 
Department: Human Resources 
Lsmith@athiscompany.com 







Employee Search Results 


No employees were a match. 


Naturally, we'll test what we've built to make sure it all works. 


At the end of this chapter, in the extra bits section, you'll find more informa- 
tion, tips, and recommendations regarding all of these steps. 


In the next chapter, we'll add the Ajax layer to these pages. 
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start the HTML page 


Start by creating anew HTML page in your text editor. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.@ Strict// 
EN" 
"http://www .w3.org/TR/xhtmL1/DTD/xhtm1l1-strict.dtd"> 
<html xmLns="http://www.w3.org/1999/xhtmL" xml: 
Lang="en" Lang="en"> 
<head> 

<meta http-equiv="content-type" content="text/htmL ; 
charset=utf-8" /> 

<titlLe>Search for Employees by Name</title> 
<Style type="text/css" media="all">@import "style. 
css" ;</styLe> 
</head> 
<body> 
<!-- search_form.htmlL --> 
</body> 
</htmL> 





The titLe reflects what this page is for. 


The style sheet will give this page the same look as the other pages in the 
site. 
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index 


C 


Castro, Elizabeth, xviii, 22, 24 
code in this book 
downloading, xii 
JSON alternative to XML, 134-138 
collation (database), defined, 9 
columns 
adding to tables, 9 
column definitions, 10 
INSERT query and, 58 
concatenation, defined, 83 
createElement( ) function, 127 
CSS style sheets 
creating, 12,°19=20,. 24 
Page appearance and, 45, 89 
using, 20 


D 


databases 
adding records to, 53 
collation, defined, 9 
connecting to, 12, 18, 23 
querying, 108 
updating, 72 
databases, creating, 1-10 
basics of, 3-4, 9 
MySQL, accessing, 2, 9 
tables, creating, 5-6, 9 
tables, populating, 7-8, 10 
debugging 
Ajax applications, 42 
Firebug and, 145 
Firefox and, 15, 145 
JavaScript, 142-145 
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MySQL client and, 97 

PHP scripts and, 23, 24 
PHP-MySQL, 58, 84, 125 

running mysql client and, 97 
Venkman JavaScript Debugger, 145 
XML, 84, 125 


departments 


department column, 9 

department IDs and PHP pages, 
15,16 

department_id value, 10 

departments table, 9, 10 

departments variable, 113 

drop-down list of, 12, 48 

GET method and, 57, 82 

in searches, 117-118 

select menu of, 14 


Document Object Model (DOM) 


inspectors, 144 


dot syntax, JSON, 138 


E 


ellipses (...), in code blocks, xii 
else clauses 
when adding records, 54, 73, 74 


when browsing, 17 
when searching, 95 


email addresses 


querying, 93, 108 
searching and, 94, 119-120, 128 
validating, 57 


emails variable, 113 
employees 


information on, 108 
printing list of, 16 


index 


add the form 








EW Add a message indicating what the form is for and 
how it should be used. (See extra bits on page 97.) 


<!-- search_form.htmlL --> 
<p>Enter the first Letter or two of an employee's Last 
name and click 'GO" to find matching employees. </p> 


BE] For non-Ajax-enabled browsers, the form will be submitted to 
search_resuLts.php, to be written next. 


Eq The form uses the GET method, like dept_form. html. 


<form action="Search_results.php" method="get" 
1d="search_form"> 

<p><input ="Last_name" id="Last_name" type="text" 
S$1ze="5" maxLength="30" /> 

<input name="go" type="Submit" value="GO" /> 

</p> 

</form> 

</body> 

</html> 


ZY For the Ajax layer, the form's id value of search_form 
will be important. 
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start a PHP page 





The first PHP page handles the non-Ajax form submission. It should also be a 
valid HTML document, so start with those tags. 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// 
EN" 
"http ://www.w3.org/TR/xhtmL1/DTD/xhtm11-strict.dtd"> 
<html xmLns="http://www.w3.org/1999/xhtmL" xmL: 
Lang="en" Lang="en"> 
<head> 

<meta http-eguiv="content-type" content="text/htmL ; 
charset=utf-8" /> 

<titLe>Search for Employees by Name</title> 

<style type="text/css" media="alL">@import "style. 
css';</style> 
</head> 
<body> 
<hi>Employee Search Results</h1> 
<?php # search_results.php 
?> 
</body> 
</htmL> 


All of the page’s functionality will 
go in between the PHP tags. 


This file must be saved as Search_resuLts.php and 
placed in the same directory as search_form.htmL. 
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query the database 





EW We make sure that some value was submitted for the 
last name or else there’s no need to query the database. 





E] The MySOL connection script is included. 


<?php # search_results.php 
if Clempty($_GET["Last_name'])) { 
require_once('mysql.inc.php'); 
$q = "SELECT CONCATCLast_name, ', ', first_name), 
email, department FROM employees LEFT JOIN departments 
USING Cdepartment_id) WHERE Last_name LIKE '" . mysql_ 
reaL_escape_string($_GET[' Last_name']) . "%" ORDER BY 
Last_name, first_name"; 

$r = mysql_query($q, $dbc); 































?> 
Ed The query Pico) WE I ee ON POO Ore Po 
1 wusats SELECT CONCAT(last_ name, ', ‘, Finacneeal, “wet be department FROM naplauens LEFT JOIN S 
will return every departments USING (department_id) WHERE last_name LIKE ‘gr%' ORDER BY last _name, first_name; ee 
Tm mm me rr th a tt + 
employee’s name, 
“3 . 8 3... teeter rrr rr er ee ee ee tte ee $= - - = - + 
email address, 1 | Gray, Gideon | g.gray@thiscompany.com | Accounting 
7 | Green, Laverne | L.green@thiscompany.com | Human Resources 
anddepartment =f! Se teverre asa ceil a ee 









972 rows in set (8.89 sec) 


whose last name 
begins with the 
submitted letters. 
(See extra bits on page 97.) 


mysql> p 


ZY The mysql_real_escape_string() function 
makes it safe to use the submitted value in a query. 
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EY check that at least one record was returned. 





results 











$r = mysql_query($q, $dbc); 
if Cmysql_num_rows($r) > 0) { 

while C$row = mysql_fetch_array($r, MYSQL_NUM)) { 
echo "<p><span cLass=\"name\">$row[@]</span><br /> 
<strong>Department</strong>: $row[2]<br /> 
<a href=\"mailto: $row[1]\">$row[1]</a> 
</p>\n"; 
} // End of WHILE Loop. 


?> 














“) Search for Employees by Name - Mozilla Firefox 


E] Fetch all the records and 
print them out. 





(~ |(E)X) 


File Edit View History Bookmarks Tools Help : 
Lo http://192, 168.0. 102/ajax/search_results.php?last_name=gr&submit=GC | ¥ | 


Eq The employee's name will be 


formatted using a CSS class. Employee Search Results 








GRAY, GIDEON 
Department: Accounting 
ZY The employee’s email address 4 | 9.2'v@thiscompany com 
will be linked so that clicking on 


it begins an email to that person. 






GREEN, LAVERNE 
Department Human Resources 


| gqreeni@thiscompany.com 






<hi>Employee Search Results<,/hi> 
<p><span class="name">Gray, Gideon</span><br /> 


<strong>Department</strong>: Accounting<br /> 
<a href="mailto:gq.qraylithiscompany.com">gq.graydthiscompany. com</ a> 


< ¥ p> 

<p><span class="name">Green, Laverne</span><br /> 
<strong>Department</strong>: Human Resources<br /> 
<a href="mailto:l.qreenfthiscompany.com'>l.green@thiscompany. com</ a> 
</p> 


</body> 
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report any errors 


EW The first else clause applies if the query ran 
just fine but didn’t return any results. 


+} //7 End of WHILE Loop. 
+} else { // No empLoyees. 
echo ‘<p class="error">No employees were a 
match.</p>"'; 
} 
mysql_close($dbc); 
+ else { // Invalid form data! 
echo ‘<p class="error">PLease enter at Least a couple 
of characters in the empLloyee\'s Last name.</p>'; 


5 


fe 





E4 The MySOL connection is closed. 


FE} The second else clause applies if 
the form was not properly filled out. 






Employee Search Results 


Please enter at least a couple of characters in the 
employee's last name. 
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test the non-Ajax version 








Ey Load the HTML page in your 
Web browser to test what we’ve 


“9 Search for Employees by Name - Mozilla Fi... Sele 
created so far. a 


Fle ‘Edit View History Bookmarks — _ Tools Help 


The address must begin with t G et (N92. 168. a. "102Jajax)search Farm. html ae | > | 





Enter the first letter or two of an employee's last 
name and click 'GO' to find matching employees. 





EB] Type a letter or two and click GO. 


FE} The PHP page should show the results. 


“) Search for Employees by Name - Mozilla Firefox & ~ (OVX) 4 Go back to the form, and 
File Edit View ay Bookmarks — Tools Help _ repeat Steps 2 and 3 until your 
(Gh “http 1192.1 168. 0 )102fajaxjsearch.. results, phptlast name= e=Hesut | ¥| D> b) hea rt’s content. 





Employee Search 
Results 


HAY, HAZEL 
Department: Redundancy Department 
hhaycethiscompany.cam 





HOWARD, EZRA 
Department: Accounting 
e howard@thiscampany cam 





HUMPHRIES, EMMET 
Department Redundancy Department 
e humphres@ithiscampany.com 
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a bt two ecards but Hed = 
7 one. if ees tabase had more 









| Ce that the search | 
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es Google 0 or some ones search 


SAR RR a OR eS 


query the database p.93 


This is the most complicated 
query in the book. It performs 

a JOIN across two tables: 

emp Loyees and departments, 
which are linked through the 
department_id columns. The 
search feature is possible thanks 
to a LIKE clause, asking for 
records where the employee's 
last name begins with whatever 
letters were entered in the form. 


Running a dynamically generated 
query through another inter- 
face, like the mysql client in 

the image, is a great debugging 
technique. Doing so will confirm 
what a query is, if it works, and 
what its results are. 
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7.enabling an 
Ajax search 


As the last piece in this book’s project, let’s take the search created in the previ- 
ous chapter and give it the old Ajax treatment. As in other chapters, we'll add 
an Ajax layer on top of what we've already created. Browsers that are Ajax- 
supportive will see the search results without reloading the page; every other 
browser will use the system already in place. 


Accomplishing this will require modifying the HTML page. Then we'll need 

to make a new JavaScript file that contains all the functionality for this 
specific example. And a new PHP script will be written that returns the search 
results, in XML format, to the JavaScript. Unlike the other Ajax examples in this 
book, we won't use the tnnerHTML attribute in our JavaScript to update the 
Web page. Here, we'll add nodes to the Document Object Model as a way of 
manipulating the page’s content. 
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es First, on page 102, we'll modify the HTML page 
to include the necessary Ajax pieces. 


EY The user enters the first couple of letters of the 
employee's last name and clicks GO. (See extra bits 
on page 124.) 


EJ On Ajax-enabled browers, the page-specific Java- 
Script will read in what the user typed and submit 
that to a new PHP script. On pages 103-106, we'll 
begin the JavaScript file that starts this process. 


Ry the PHP script, written on pages 107-110, will 
search the database for employees whose name 
begins with the provided letters. It will return any 
matched records as XML data. 


EY The JavaScript will take the XML returned by 
the PHP script and use it to update the HTML page. 
We'll complete this JavaScript file on pages 111-122. 


Ey Naturally, we'll test what we've built on page 123 
to make sure it all works. 


Bd At the end of this chapter, in the extra bits sec- 
tion, you'll find more information, tips, and recom- 
mendations regarding all of these steps. 
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HTML page ——— 












Enter the first letter or two of an employee's last 
j name and click 'GO' to find matching employees. 


pa G 


JavaScript Form data 


code 
code 


code 


XML data 








Enter the first letter or two of an employee's last 
| name and click 'GO' to find matching employees. 


GRAY, GIDEON 


Department: Accounting 


g.gray@thiscompany.com 


GREEN, LAVERNE 
Department: Human Resources 


|.green@thiscompany.com 
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{@OQO___ BSearchfor Employees byName 
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add the Ajax elements 


4 Include the generic Ajax JavaScript file by adding the right code to the 
HTML head. (See extra bits on page 124.) 


<titLe>Search for Employees by Name</title> 

<script src="ajax.js" type="text/javascript"></ 
script> 

<script src="search.js" type="text/javascript"></ 
script> 

<style type="text/css" media="alLl">@import "style. 
css';</style> 





2 Include the page-specific Ajax JavaScript file by adding that code to the 
HTML head. We'll start making this script next. 


</form> 
<div id="results"></div> 
</body> 


E} Add a DIV to the HTML page to report on the results. 


EY Save the file (it will continue to use the name search_form. htm1). 
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apply the Ajax layer 


Create a new JavaScript file that starts with the following code (see extra bits 
on page 124): 


Ey The first line tells the Web browsers to run the 1n1tC) function after 
loading the entire page. The tnitQC) function sets up all the Ajax activity. 


window.onLoad = init; 
function initd) { 
var ajax = getXMLHttpRequestObjectQ); 


1f Cajax) a 


BY The function calls the EJ The function then checks to see if 
getXMLHttpRequestObjectC) the ajax variable has a valid value. 
function to get a valid, browser- With supported browsers, ajax will 
specific object. This function is be an XMLHttpRequest object. With 
defined in ajax. js, which will nonsupported browsers, ajax will 
have already been included by have a value of false, and this con- 
the HTML page. ditional will be false. 


enabling an Ajax search 103 


apply the Ajax layer (con, 








4 Next, the function checks to see if the browser supports 
the Document Object Model (DOM) and, specifically, if the 
page has an element with an 1d of results. 


if Cdocument.getELementByIdC'results')) { 
document. getELementByIdC'search_form' ).onsubmit 
= function(d) { 





Eq Finally, an onsubmitQ event is attached to the form 
(which has an 1d value of search_form). In other words, 
when the form is submitted, do the following... 
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set up the Ajax 


EW Provide to the ajax object the name of the page that should be 
sent the request. This is search_resuLts_xmL .php, to be written 
next. The request will be made using the get method. 


document. getELementByIdC'search_form').onsubmit = 
functioncd) { 

var Last_name = document.getELementBylIdC" Last_ 
name').vaLue; 

ajax.openC'get", ‘search_resuLts_xmlL .php?Last_name=' 
+ encodeURIComponent(CLast_name) ); 

ajax.onreadystatechange = function(d) { 
handLeResponse(ajax); 











2) As part of that request, the Last_name 
value (the letters the user entered in the 
form) will be passed along in the URL. (See 
extra bits on page 124.) 


FE} When the ajax object’s readyState 
value changes, the handLeResponse() 
function should be called, passing that 
function this same object. 
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EW The actual Ajax request is made. 


the form submission). 


} 
ajax.send(CnulLL); 
return false; 


handlLeResponse(ajax); 


iplete the function 


} // End of anonymous function. 


+ // End of DOM check. 
+} // End of ajax IF. 
+ // End of initd) function. 


Save this file as . 
search.js and | e 
place it in the same | 
directory on your | 

Web server as : e 
every other file. | | 


add_ermployee_xml.php 


add_employee php 


TEXT 


dept_results_ajax php 


TEXT 


mysql.inc. php 


TEXT 


search _results. php 
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DO Oi a 


TEXT 


add_employee html 


By 


TEXT 


ajax. js 


TEXT 
dept_results.php 
TEXT 


search_form.htm| 


rs 


| Text | 


search js © 


(ajax 





2 Finally, the function returns a value of false to tell the Web 
browser not to actually submit the form (since the Ajax is handling 





TEXT 


add _employee.js 


ey 


TEXT 


dept_form. html. original 


Spy 


TEXT 


dept. js 


TEXT 


search _results_xml.php 


TEXT 


st'\le.css 
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prepare for XML 





A new PHP script will do the same thing as search_resuLts. php, only it will 
return all of its results as XML data. This data will be handled by the JavaScript 
in the Web browser. Start a new PHP script in your text editor or IDE. 


EW This PHP page will not 
be viewed in the Web 
browser, so it begins with 
the opening PHP tag, not 
any HTML. (See extra 
bits on page 125.) 


<?php # search_resuLts_xml.php 
headerC"Content-Type: text/xml"); 


Eq The header) function is used 
to send meta-information (i.e., not 
actual data). Here the header() 
function sends a Content-Type of 
text/xml. In layman’s terms, this 
is a way of saying that XML data 
should be expected to follow. 











echo ‘<?xml version="1.0" encoding="utf-8" 


Standalone="yes" ?> 
<emp Loyees> 


| 


FE} XML data begins wth 
the declaration. 
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ZY All XML documents have one 
root element. This can be a made-up 
value, like empLoyees here. 
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query the database 





E44 The MySOL connection 
script is included. 


EY We make sure that some 
value was submitted for the 
last name or else there’s no 
need to query the database. 





<emp Loyees> 


if ClemptyC$_GET["Last_name'])) { 
require_once('mysqL.inc.php'); 
$q = "SELECT CONCATCLast_name, ', ', first_name), 
email, department FROM employees LEFT JOIN departments 
USING Cdepartment_id) WHERE Last_name LIKE *" . 
mysql_real_escape_string($_GET["Last_name']) . "%' 
ORDER BY lLast_name, first_name"; 
$r = mysql_query($q, $dbc); 








EJ The query will return every Ey The mysql_real_escape_ 


employee’s name, email, stringQ function makes it 
address, and department safe to use the submitted value 
whose last name begins with ina query. 


the submitted letters. (See 
extra bits on page 125.) 


a mysql> SELECT CONCAT(last_name, ‘', '‘, : 
‘ departments USING (department_id) WHERE last_name LIKE ‘GR%' ORDER BY last_name, first_name; oy 


pa a ee en es enna nee +------------------------- $-----------------+ 








7 | CONCAT(last_name, ', ', first_name) | emai | | department | 
Dh a i a hs ee ee sees +—-----------------+ 
1 | Gray, Gideon | g.gray@thiscompany. com | Accounting | 
7 | Green, Laverne | L.green@thiscompany.com | Human Resources | 
ae A ea a al Ae eae lec tees 


| 2 rows in set (0.14 sec) 





mysql> fj 
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fetch the results 


EW check that at least one E] Fetch all the records and 
record was returned. print them out as XML data. 


$r = mysqlL_query($q, $dbc); 
if Cmysql_num_rows($r) > @) { 

while ($row = mysql_fetch_array($r, MYSQL_NUM)) { 

echo "<empLoyee> 

<name>$row[0]</name> 
<department>$row[2]</department> 
<email>$row[1]</email> 
</empLoyee>\n" ; 

+} // End of WHILE Loop. 
} // End of IF. 





E} The newline character (\n) makes sure that whatever is 
printed next will go on the following line Clike hitting Enter or 
Return on your keyboard). 


]<employees> 

j - <employee> | 

<name>Gray , Gideon</name> 
<department> Accounting</department> 
<email>g gray @ thiscompany .com</email> 

] </employee> 

] - <employee> 





<name>Green, Laverne</name> | 
<department>Human Resources</department> 
<email>|.green @ thiscompany .com</email> 
7] </employee> 
}</employees> 
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complete the PHP 


Ey Close the database connection 
(not required, but good form). 


} 77 Ena of IP, 
mysql_cLose($dbc); 
+ // End of $_GET['Last_name"] IF. 
// Complete the XML document. 
echo '</empLoyees>' ; 
?> 


2 Close the root XML element 
to complete the XML output. No 
need to use closing HTML tags! 


E} Save this file as search_ 
resuLts_xmlL.php and place it in 
(you guessed it) the same direc- 
tory as everything else. 
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handle the response 


The PHP page sends back XML data, which must be handled by the JavaScript. 
Add this new function to the search. js JavaScript file. (See extra bits on 
page 126.) 


EY This JavaScript function is called 
when the ajax object’s readyState 
value changes (see the tn1tQ) func- 
tion). The function receives the ajax 
object when called. 


function handleResponse(Cajax) { 
if Cajax.readyState == 4) { 
if CCajax.status == 200) || Cajax.status == 304) ) 





EA The function shouldn't do FE] If the status code is equal 
anything until readyState has to either 200 or 304, every- 
a value of 4, meaning that the thing worked fine and we can 
Ajax transaction is complete. use the returned results. 


enabling an Ajax search 111 





prepare the page 





EW The results variable now refers to a specific area in the 
DOM of the HTML page. 







if CCajax.status == 200) || Cajax.status == 304) ) { 
var results = document.getElementBylId('resuLts'); 
resuLts.styLle.dispLay = "block’'; 
while Cresults.hasChildNodes()) { 
results. removeChildCresults. lLastChilLd); 







} 


EB] The results area of the E} We remove every node that 
HTML page is initially invisible, might exist within results. 
so it needs to be made visible. (See extra bits on page 126.) 
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handle the XML 


EW The data variable now 
stores the PHP page’s response 
as XML data. (See extra bits on 
page 126.) 


EA The names variable is now 
an array of every element in 
the XML data with a tag name 
of name. If four names were 
returned, then names would 
now have four elements in it. 





resuLts.removeChildCresults. LastChild); 


i 


var data = ajax.responseXML ; 


var names = data.getELementsByTagName( "name" ); 
var departments = data.getELementsByTagName( 'departmen 


t"); 


var emails = an ee eae 


E} The departments variable is 
now an array of every element 
in the XML result with a tag 
name of department. Because 
of the way the PHP script 
generates the XML data, there 
should be one department for 
each name. 
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Z¥ The emails variable is now 
an array of every element in the 
XML result with a tag name of 
email. Again, there'll be one 
email address for each name. 
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display the results 





The results should be displayed like they are in the non-Ajax version. This is the 
generated HTML from that page, which should be replicated. (See extra bits 
on page 127.) 


j<p><span class="name">Gray, Gideon</span><br /> 

| <strong>Department</strong>: Accounting<br /> 

<a href="mailto:g.gray@éthiscompany.com">g.gray@thiscompany.com</a> 

| </p> 

j<p><span class="name">Green, Laverne</span><br /> 

. <strong>Department</strong>: Human Resources<br /> 

<a href="mailto:1.green@thiscompany.com">1.green@thiscompany.com</a> > 
</p> ) 






| Before attempting to print the employees, we should confirm that some 
were returned by the PHP page. If at least one employee was returned in the 
XML data, then names will have more than O elements in it. You can count 
the number of elements in an array by referring to its Length. 


EB] We'll need a slew of variables to add the values to the DOM. 


var emails = data.getELementsByTagNameC'email'); 
1f Cnames.Length > @) { 

var employee, span, name_node, dept_node, dept_ 
Label, br, strong, a, email; 


114 enabling an Ajax search 


Eq} The for loop will access every item in the 
names array. It counts from O (the first item 

in an array is at 0) to one less than the num- 
ber of items in the array. With each iteration 
of the loop, the counter, 1, is incremented. 


for (var 1 
emp Loyee 


Q; 1 < names.Length; i++) { 
document. createELement('"p'); 


4 Each employee returned by the PHP 
page will be put within an HTML paragraph 
(see the HTML source code on the previous 
page). So, within the loop, the first step is 
to create a new element of type p. This step 
adds a paragraph to the DOM, although the 
Paragraph doesn’t yet have anything in it, 
nor has it been placed on the page. 
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handle the name 








The employee’s name should be put within a span whose cLass attribute is 
name. This should be followed by a break. 


<span class="name">Actual Name</span><br /> 


le Another element, of type ey A different kind of node, a text 
Span, is created. (See extra node, is created. The value of 
bits on page 127.) the text node (which is to say the 


actual text) will be the value of the 


EA The class attribute of the name returned in the XML data. 


span is given a value of name. 


So the text put within the span BY The text node is made a child 
(see the next two steps) will be of the span node. Therefore, the 
formatted as a name. text node (which is the employee’s 


name) is within the span. 





empLoyee = document.createELement('p' ); 
span = document.createELement("span' ); 
span.setAttributeC'class', ‘name'); 
name_node = document.createTextNodeCnames[71]. 
firstChild.nodeVaLue); 

span. appendChildCname_node) ; 
emp Loyee..appendChild(Cspan) ; 
br = document.createELement('br'); 
emp Loyee.appendChild(br) ; 








Eq The span is attached to [J A break element is added to the 
the paragraph, created as paragraph so that the pieces to fol- 
emp Loyee. low will begin on the next line. 
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handle the department 


The department has a little more formatting. It starts with the word 
Department with strong emphasis, followed by a colon and the actual 
department. There’s another break at the end. 


<strong>Department</strong>: Department Name<br /> 


EW Another element, of type strong, is created. 
FE] A text node with the value Department is created. 





emp Loyee.appendChild(br) ; 
strong = document.createELement(C'strong'); 
dept_Label = document.createTextNode( "Department" ); 
strong.appendChild(Cdept_Label1); 

emp Loyee.appendChild(strong); 


Eq The text node is made a child of the strong node. This places 
the text Department between the strong tags. 


enabling an Ajax search 117 


handle the department (ont) 


ZY Another text node is generated, with a value of the 
colon, followed by a space, followed by the name of 
the department from the XML data. 


Eq This latest text node is attached to the paragraph, 
which is emp Loyee. 







dept_node = document.createTextNode(': " + 
departments[1].firstChild.nodeVaLue); 
emp Loyee .appendChildCdept_node) ; 
br = document.createELement('br'); 
emp Loyee. appendChild(br); 


[J A break element is added to the paragraph so 
that the pieces to follow will begin on the next line. 
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handle the email 


The email address is tricky because it should be linked so that clicking on the 
email address creates an email to that person. 


<a href="mailto:address@exampLe.com">address@exampLe. 
com</a> 


EW Another element, of type a, is created. This type 
of element is for any link. 







EA The href attribute of the a element is givena 
value of matLto: plus the person’s email address 
from the XML data. 


emp Loyee.appendChild(br); 
a = document.createElement('a'); 
a.setAttributeC"href', "mailto:' + emails[i]. 
firstChild.nodeValue); 
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handle the emall cont, 








E} A text node is created with a value of the 
employee’s email address from the XML data. 


EY The text node is made a child of the a node. 
Therefore, the text node (which is the employee’s 
email address) is within the a. 


email = document. 
createTextNode(emails[i].firstChild.nodeVaLue); 
a.appendChildCemailL); 
emp Loyee. appendChild(a) ; 
resuLts.appendChildCempLoyee) ; 
+} // End of FOR Loop. 





Ey The a element is attached to the paragraph. 


[J The entire paragraph, which represents all of 
the employee’s data, is made a child of the results 
DIV. (See extra bits on page 128.) 
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display no results 


If the PHP page returned no results, a message should be displayed 
saying as much. 


No employees were a match. 





EW A new element of type p is created. 


Eq The class attribute of the paragraph is given a value of error. 


+ // End of FOR Loop. 

+} else { // No empLoyees, print a message. 
var node1 = document.createELement('"p'); 
node1.setAttributeC'"class", "error'); 
var node2 = document.createTextNodeC'No empLoyees 

were a match."); 
node1.appendChiLdCnode2); 
resuLts.appendChiLd(Cnode1) ; 








} 


EF} A text node is created with a value of 
No employees were a match. 


Ey the text node is made a child of the paragraph node. 


Ey The paragraph is made a child of the results DIV, 
thereby putting the paragraph onto the page. 
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complete the function 


If we didn’t get a valid status code back from the Ajax request, we should 
formally submit the form to the handling PHP page (as if the Ajax layer 
didn’t exist at all). 


resuLts.appendChildCnode1) ; 


} 
+ else { // Bad status code, submit the form. 


document .getELementById('search_form' ).submit(); 


} 
} // End of readyState IF. 
} // End of handleResponse() function. 
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test the Ajax layer 





EW Load the HTML page in your Web browser. 
The address must begin with http: // for this to work. 


BS tt 


eS 7 2 S| “L4hitp://localhost/aja: 


© 2: Bu. BORER 4 Petuosatnot pate 3 ploye E> Nae uel’ 


Enter the first letter or two of an employee's last name and 
1 click 'GO' to find matching employees. 


F] Enter a letter or two 
and click GO. 





] Enter the first letter or two of an employee's last name and 
j click 'GO' to find matching employees. 


jica eo" 





FE} The HTML page should show the results without 
reloading the page or going to a new page. 


2 8! 6. Ee NS ue ph Sinn Pony oh 1OF SEP beiedicd bese Si es 


7 Enter the first letter or two of an employee's last name and click 
; ‘GO’ to find matching employees. 


BARNES, HENRY | Eq Enter invalid letters and 
henry@thiscompany.com 





yap lates : click GO to see the result if no 


employees in the database 
matched the search term. 





i Enter the first letter or two of an employee's last name and click 


| ‘GO' to find matching employees. 


j eat go. 
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what we'll do ». 10 
e Inthis example, | suggest 
_that users enter only a couple 
of letters because the data- — 
base has only 20 records in it. 
- With the employees entered 
in chapter 1, “creating the | 
database,” Gr will return two 
records but Gre only one. 
_ \|f your database had more | 
~ names in it, entering longer 
values would be appropriate. 


add the Ajax 
elements >. 102 


e The ajax.js file, written in 
chapter 3, “browsing using 
Ajax,” defines a function that 
returns a browser-specific 
XMLHttpRequest object. This 
file is needed by any page that 
performs any Ajax operations. 


e Because the DIV, where the 
results will be reported, has 
an id value of results, it'll 
be formatted according to 
the rules dictated in style. 
css. This is the same as the 
resuLts DIV in dept_form. 
html and in add_empLoyee. 
html. For starters, the DIV will 
be invisible when the page is 
first viewed. 
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apply the Ajax 
layer ». 103 


Most of this code is exactly 
like that in dept. js and add_ 
emp Loyee. js. The big differ- 
ence at first is the name of the 
form being referenced. It’s in 
the rest of the code—what 
should be done when the form 
is submitted—that the big dif- 
ferences can be found. 


set up the Ajax ».1.05. 


The encodeURIComponent() 
function makes it safe to pass 
in the URL whatever value the 
user entered in the form. 


By passing the form data in 
the URL, we ensure that the 


Ajax request will be made 


to search_results_xm1. 
php? Last_name=XXX, where 
XXX represents what the user 
typed in the text box. : 
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prepare for XMIL »..07 


e The PHP script sends its 
response as XML data, not asa 
normal Web page. Everything 
PHP will print will be part of 
this XML and there will be no 
HTML output. 

e The XML data being created 
is really like the data in an 
HTML page, where there’s one 
root element and any number 
of nested subelements. For 
this example, the root element 
will be called empLoyees and 
there will be zero or more sub- 
elements called empLoyee. 


e If the PHP page does not use 
the header() function to 
set the Content-Type, the 
JavaScript that receives this 
response will not recognize it 
as XML. 
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LEELA 


query the 
database ». 10 


e To debug any PHP-MySQL 
problems, you'll need to print 
out the query to inspect its 
syntax. You should also invoke 
the mysql_error() func- 
tion to see what problems the 
database reports. 


e Auseful debugging technique 
when working with XML data 
is to verify that your PHP 
script is returning valid XML. 
To see the result of the PHP 
page, either use JavaScript to 
access ajax. responseText 
(in the handLeResponse(C) 
function) or submit your 
form to the PHP page directly 
(without using JavaScript). 


e For directly viewing XML in 
your Web browser, you'll 
want to use a browser that 
supports the format. At the 
time of this writing, this 
includes recent versions of 
Internet Explorer and Firefox, 
but not Safari. 
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handle the 
response p.111 
e Inthe initQ function, we tell 
the JavaScript to call a func- 
tion called handLeResponse() 
_ whenever the readyState 
- value changes. This value will 
change multiple times during 
an Ajax request, so this func- 
tion will be called multiple 
times. : 


e The XMLHttpRequest status 
attribute stores the HTTP 

status code returned by the 
server-side page. There are 
dozens of status codes from 

200, meaning that everything 

~ was OK, to values over 500, 
which are normally server 
errors. A status code of 304 

indicates that the page was 
found but had not been modi- 
fied since a certain date and 
time. 


prepare the page »..12 
e The new trick in this specific 
example is the use of nodes 
as the way of manipulating 
the page’s content. If you 
think of the Document Object 
Model as a tree, then a node 
is a branch on that tree; each 
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branch has a parent (which is 
either another branch or the 
tree trunk) and some have 
children (more branches). To 
place content on the page, 
we'll add branches to the 
resuLts section. So to pre- 
pare the page for the XML 
data, we need to clear out any 
existing nodes in results. 
We do so by applying the 
removeChiLdQ) function to 
resuLts, removing the last 
node, until there are no more 
nodes left. 


handle the XML ».1:3 


The server's response is avai- 
labe in two attributes of the 
XMLHttpRequest object. It 
can be found as plain text in 
responseText or as XML data 
in responseXML. 


The XML data can be ac- 
cessed just like elements on 

an HTML page, using the 
Document Object Model. So 
data.getELementsByTagName 
C'name") refers to every item 
in the XML data with a name 
of name. 
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display the 

results ,. 114 

e This example, which uses both 
nodes in the DOM and XML 
data from PHP, is the most 
complicated in the book. The 
idea is simple, though: take 
the HTML code generated by 
the non-Ajax PHP script and 
duplicate it using Ajax. So 
everything in the last half of 
this chapter is just a matter 
of using nodes, the DOM, and 
XML to that end. 


e So many JavaScript variables 
are declared because creating 
nodes in the DOM is a multi- 
step process, as you'll see in 
this chapter. And since each 
employee's record has multiple 
elements—one paragraph, 
one span, two breaks, one a 
link, one strong, plus three 
pieces of text (the name, the 
department, and the email 
address) —it'll be easiest to 
follow using many different 
variables. 


e The syntax of the for loop 
is acommon way to access 
every item found in an array. 
Within the loop, the specific. 
array item is accessed via 
arrayname[i]. 
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e he createELement() fu netion a 
_ is the most important for adding — 


node to the DOM. It makes the 


element, but you then have to 


__ add it to the page using append- — 


| mince 


handle the name ».1« 


e The setAttribute() func- 
tion takes two arguments: 
the name of the attribute to 
set and the value it should be 
given. 

e To get the values from 
the XML data, refer to 
arrayname[i].first- 
Child.nodeVaLue. The 
arrayname[i] refers toa 
specific element in the array; 
firstChild refers to the first 
branch of that element (which 
we know is the only node each 
element has); and nodeVaLue 
refers to the actual content 
found there (which is the 
text). 

e The appendChild() function 
adds the element in paren- 
theses to the element named 
before the period. 
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handle the email ». 120 

« Itisn’t until the employee ~ 

element, with all its subele- 
ments (or nodes), is appended 
to the results DIV that the 
employee data will appear on 
the HTML page. 

e If the PHP script returns five 
employee records, then the 
results DIV will end up 
having five child nodes. Each 
of these nodes will be a para- 
graph element, within which 
are the span for the name, 

_ the strong element and other 
department text, the a ele- 
ment for the email address, 
and the two breaks. 
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where to go from here 





This book provides all the code and knowledge required to add Ajax function- 
ality to a Web site. But, as with most things, there’s a lot more to be learned. 
This appendix will steer you in other useful directions and provide the occas- 
sional code snippet as alternatives to the code used elsewhere in the book. 
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Ajax issues 





Ajax is a wonderful technology that can greatly enhance a user’s 
Web experience, but it’s not perfect. In particular, you should be 
aware of the following limitations: 


Ey If a user’s browser does not support JavaScript, Ajax is useless. 
(See extra bits on page 146.) 


2 The results of Ajax-enabled pages cannot be bookmarked 
without taking extra steps. 


EJ The user cannot use the back button or their browser's his- 
tory to review previous results (again without taking extra steps). 


Z] Search engines cannot index Ajax pages. 
5 Ajax applications can be more demanding of the browser. 


G Because Ajax pages change the standard client-server relation- 
ship, their use may be confusing for the end user. 


Bd Ajax requires that the user be online the entire time. 
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Ajax alternatives 


It may seem strange to discuss other options in a book 
about Ajax, but you can get a better understanding of 
a thing by knowing what the alternatives are. What 
can be accomplished via Ajax may also be possible 
using: 


Ee iFrames: While not as powerful as Ajax, iFrames 
are well supported by most browsers. iFrames often 

still make use of JavaScript; therefore, they can have 
some of the same issues as Ajax. 


2 Flash: This is an extremely useful technology but 
requires that the user install the Flash plug-in for 
their browser. 


E} Java applets: Like Flash, Java applets havea 
wide range of uses and abilities but require installed 
browser support. 
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introducing JSON 


JSON (avaScript Simple Object Notation) provides an alternative 
to XML for transmittng data. Here is some sample XML data from 
Chapter 7, “enabling an Ajax search”: 





<emp Loyees> 

<emp Loyee> 
<name>Gray, Gideon</name> 
<department>Accounting</department> 
<email>g.gray@thiscompany.com</emai lL> 
</emp Loyee> 

<emp Loyee> 
<name>Green, Laverne</name> 
<department>Human Resources</department> 
<email>L.green@thiscompany.com</emai L> 
</emp Loyee> 
</emp Loyees> 
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Here’s how that same data would look in JSON format (actually, all the data 
would be on one line, without spaces, but I’ve spaced it out for clarity): 


L 


{"name": "Gray, Gideon", "department": "Accounting", "emat 
L":"g.gray@thiscompany.com"}, 

{"name": "Green, Laverne", "department" : “Human 
Resources", "email": "L.green@thiscompany.com" } 


J 


Because JSON data is JavaScript, it’s arguably easier to work with than 
XML. And the same data will likely be smaller in JSON than in XML (meaning a 
smaller transfer size from the server to the client). See extra bits on page 146 


for why you shouldn’t use JSON. 
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sending JSON 


Here’s how the search_resuLts_xm1.php script from Chapter 7 would 
be rewritten to send JSON data instead of XML: 





<?php # search_resuLts_json. php 
headerC"Content-type: application/json" ); 
if Clempty($_GET['last_name'])) { 

require_onceC'mysqL.inc.php' ); 

$q = "SELECT CONCATCLast_name, ', ', first_name), 
email, department FROM employees LEFT JOIN departments 
USING Cdepartment_id) WHERE Last_name LIKE '" . mysql_ 
real_escape_string($_GET['lLast_name']) . "%' ORDER BY 
Llast_name, first_name"; 

$r = mysql_query($q, $dbc); 

if Cmysgl_num_rows($r) > 0) { 


EW The content-type header indicates what type of data is 
being sent by this script. 
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EP] Initialize an array that will store the results. 
— = array(); 


while ($row = mysql_fetch_array($r, MYSQL_NUM)) £{ 
$data[] = array C'name' => $row[Q], 
'department' => $row[2], 
"email' => $row[1]); 

+ // End of WHILE loop. 

echo json_encode($data) . "\n"; 


mysqlL_close($dbc); 
+ // End of $_GET['Last_name'] IF. 


?> 





FE} Add each record as a new item in the $data array. 


4 Use a library to turn the array into JSON format, and 
print the results. (See extra bits on page 146.) 
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accessing JSON data 





To finish changing the search from Chapter 7 to use JSON, you must alter the 
search. js file. All of the relevant changes go within the handLeResponse() 
function (although you also have to change the reference to the search_ 

resuLts_xm1L.php script earlier in the JavaScript file, if you rename that file): 


EW Retrieve the data in ajax. responseText. 


EY convert the data to an object using evalQ. 


while CresuLts.hasChildNodes()) { 
results.removeChildCresuLlts. LastChild); 


$ 


var data = evalC'C' + ajax.responseText + ')'); 
if Cdata.length > 0) { 


E} Check that some records were returned by looking at the array’s size. 
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using JSON data 


To update the DOM using the JSON data, complete the modification of the 
handLeResponse() function: 





EW Access every returned record using a loop. 


if Cdata.length > @) { 
var employee, Span, name_node, dept_node, dept_ 
label, br, strong, a, email; 
for (var 1 = @; 1 < data.length; i++) { 
empLoyee = document.createELement('p'); 
Span = document.createELement('span' ); 
Span.setAttributeC'class', 'name'); 
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using JSON data cont, 


EB] Access the individual elements using dot syntax. 


name_node = document. createTextNodeCdata[1].name); 
span.appendChildCname_node) ; 

emp Loyee. appendChild(Cspan) ; 

br = document.createELement(C'br' ); 

emp Loyee.appendChild(br); 

strong = document.createELementC'strong'); 
dept_Label = document.createTextNode( 'Department' ) 


strong.appendChildCdept_LabelL); 
emp Loyee.appendChild(Cstrong) ; 
dept_node = document.createTextNode(': ' + 

data[1].department) ; 
emp Loyee.appendChildCdept_node) ; 
br = document.createELementC'br'); 
emp Loyee.appendChild(br); 
a = document.createELlementC'a'); 
a.setAttributeC'href', ‘mailto:" + data[1].email); 
email = document.createTextNodeCdata[1].email); 
a.appendChildCemaiL); 
emp Loyee.appendChild(a); 
resuLts.appendChildCempLoyee) ; 

+} // End of FOR Loop. 
+ else { // No employees, print a message. 
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web resources 





Along with the frameworks sites listed on the following pages, you might find 
these Ajax-specific sites worth your time (I’ve whittled the hundreds and hun- 
dreds of Ajax sites down to a good starting handful): 


EY Ajax Patterns (www. ajaxpatterns.org) has tons of Ajax resources (in pro- 
gramming, a pattern is a best practice for solving problems). 


2 AJAX Matters (WWW. ajaxmatters.com) has a lot of articles on various Ajax- 
related subjects. 


E} Ajaxian (ww. ajaxian. com) has been around since the beginning of Ajax 
and has articles covering a range of Ajax-based topics. 


ZY Douglas Crockford’s Wrrrld Wide Web (ww. crockford.com) is short on 
frills but long on usefulness. Crockford is a prominent JavaScript developer and 
one of the people behind JSON. 


FE You can find the first coining of the word Ajax at 
http: //adaptivepath. com/pubLications/essays/archives/0Q@385. php. 


Appendix 139 


J aVa 





Script frameworks 





A framework is an established library of code that can be used 
to more easily do the things you’d otherwise program by hand (as 
| do in this book). Here are a handful of the dozens and dozens of 
frameworks available. (See extra bits on page 147.) 



















Ne 


Spry http://Labs .adobe.com/technoLogies/ 
spry/ 
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PHP-Ajax frameworks 


Instead of using a JavaScript-specific framework, you could use 
one that helps with both the JavaScript and the PHP. The two 
most popular are: 


EY SAJAX (Simple Ajax Toolkit): www. modernmethod. com/sajax/ 
PY xajax: www. xajaxproject.org 
FE} PEAR:: HTML_AJAX: http://pear. php.net/package/.HTML_AJAX 
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debugging JavaScript 





Mastering the art of debugging is crucial when using any programming lan- 
guage, and Ajax/JavaScript is no exception. | could write an entire book, or at 
least a full chapter, on the subject, but you'll find this short list of the best tools 
and techniques helpful: 


_ Error Console en oO} 


Errors Warnings Messages : Clear 






ease | 


Error: unterminated string literal 


—, Source File: http://localhost/ajax/search_ison.is Line: 66 





a eR a ne ne ee ne ee a a ne A SO ne nm i eee ee Ok ie FE SN AAR Bi ae nee a ek Re ee pa A ea ne 


EW A JavaScript console: Firefox has a JavaScript console built in. 
It‘ll print errors and other necessary messages to aid your debug- 
ging. If an Ajax page doesn’t work as expected, this is the first place 
you should look. 
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The page at http:/ /localhost says: 


[{"name":"Gray, 


Gideon" ,"department":"Accounting","email":"g.gray@thiscompany.com'},{"name":"Green, 
Laverne’ ,"department’:"Human Resources","email":"|.green@thiscompany.com'}] 





EF] JavaScript alerts: | recommend using alerts to confirm what 
functions are executed and what the values of variables are. 


alertC'Inside the handLeResponse() function."); 
alertCajax.responseText); 
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debugging JavaScript (ont, 


E} A DOM inspector: Because most Ajax applications change a page’s content 
dynamically, just looking at the source of the page won't be of use. Instead, use 
a DOM inspector to see the modified page content. Firefox has one built in Con 
Windows, you'll need to do a custom install of Firefox to add the inspector). 
You can also find and install DOM inspectors that work with Internet Explorer 
and Safari, but why bother when Firefox's already exists? 











eevee 


{ee DOMInspector TT. 


1G) BA http/flocaihost/ajax/search_formhtm) sssisi—i‘“‘<‘;‘“‘;™S Inspect 














1] ~ Document-DOMNodes = = —— » ¥ ‘» Object-DOMNode > 


AERATOR ERENCE ACME NOM CN ONAN PAREN OPNA RR OOTY OI 





pearnececeaccetats! enensene ene nanet: 


| nodeName id class RR: . 
write 7” suissiecleceasatl daniels Wear : 
iv #document 
htm 
v HTML Node Type: 1 
® HEAD 
w BODY 
ecomment href mailto:g.gray@thiscompa... 
#text 
> P 
#text 
>» FORM search_f... 
#text i. 
¥ DIV results 
Ww P 
vw SPAN name 
#text 
BR 
vw STRONG 
#text 
#text 
BR 
es ee eR ny. 


#text 


Namespace URI: 


Node Value: 


> P 
#text 
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4 The Venkman JavaScript Debugger 
(WWW. mOoZLLLa.org/projects/venkman): 
This is a sophisticated JavaScript debugger 
that can be used through Firefox. 


Eq JsLint (ww. jslint.com): This pro- 
gram performs basic syntax checks on 
JavaScript. Just paste your JavaScript in 
the box on the JSLint Web site and click 
the JSLint button. 


[J Firebug (ww. getfirebug. com): This 
FireFox extension provides a wealth of 
debugging tools, covering HTML, CSS, 
JavaScript, and the DOM. 


bd Firefox Firefox Firefox: |n case it’s 
not clear from this list (where Firefox is 
singled out four times), Firefox is clearly 
the best browser for debugging Ajax 
applications (it may be the best browser 
period). You'll need to test your Ajax 
scripts on other browsers to verify sup- 
port, but when it comes to debugging, 
use Firefox first! 
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Ajax issues p. 130 

e With the code in this book, every 
example will work whether or 
not the user’s browser supports 
Ajax. The examples were pur- 
posefully designed this way, so 
that if the nice Ajax layer won't 
work, the user isn’t left behind. 
This is an approach you should 
maintain as much as possible. 


e Ajax pages cannot be book- 
marked, recorded in the brows- 
er’s history, or listed in search 
engines because the changes 
aren't reflected ina URL. By 
taking some extra steps, it’s pos- 
sible to overcome some of these 
limitations. Search the Web for 
techniques. 


e |t’s important to give obvious 
clues to the user when something 
is happening or has happened. In 
this book, | use an overt format- 
ting of Ajax results to make the 
changes apparent. 
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introducing JSON p. 132-133 


e The biggest concern with using 
JSON is that there are some 
security risks involved. The 
eval() function actually runs 
the received text as JavaScript 
code, meaning that the Ajax pro- 
cess could be hacked if the data 
could be manipulated. Search the 
Web for more on this subject and 
for possible safeguards. 


e Another issue with JSON is that 
the syntax is very, very particu- 
lar, much more so than XML. 
Using a library to create the 
JSON data will give more reliable 
results. 


sending JSON »p. 134-135 


e Instead of trying to create the 
exact JSON syntax programmati- 
cally, | think it’s best to use an 
external library that will do this 
for you. In this script, I’m mak- 
ing use of the PECL JSON class 
(which must be installed; see 
http://pecL.php.net—it’s 
enabled by default as of PHP 
5.2). 


e Alternatively, see the official 
JSON Web site (WWW. JSOn.org) 
for includable PHP libraries that 
can perform the conversion of an 
array to JSON. 
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SYMBOLS 


Serror variable, 68, 71, 72 
Serrors array, 50, 52 

... (ellipses), in code blocks, xii 
\n (newline character), 109 

+ (plus sign), in JavaScript, 83 
<title> values, 13 


A 

adding employees, 43-58 
HTML pages, creating, 44, 45-48 
PHP scripts, creating, 44, 49-54 
testing, 54-56 

adding employees (using Ajax), 59-86 
Ajax, setting up, 64, 82 
database, updating, 72 
form data, preparing, 65-66, 83 
form data, validating, 68-71, 84 
HTML pages, modifying, 62, 82 
HTML pages, updating, 75-79, 85 
JavaScript files, creating, 62-63, 83 
overview of, 60-61 
PHP scripts, new, 67, 83 
testing, 80-81 
XML, completing, 73-74 

Ajax 
Ajax layer, applying, 63, 103-104 
alternatives to, 131 


basics of, x—xi 
checking for support of, 28 
elements, adding, 62, 102 
frameworks, listed, 141 
indexing Ajax pages, 130 
limitations of, 130, 146 
setting up, 30, 64, 105 
testing, and Firefox, 42 
alerts, JavaScript, 143 


appendChild¢ ) function, 127 


B 


back buttons, 130 
bookmarking, 130, 146 
browsing employees, 11-24 
CSS style sheets and, 12, 19-20, 24 
databases, connecting to, 12, 18, 23 
HTML pages, creating, 12, 13-14, 22 
PHP scripts, writing, 12, 15-17, 
22-23 
testing pages, 12, 21, 24 
browsing employees (using Ajax), 
25-42 
functions, calling, 29-31, 35-36, 
40, 41-42 
functions, making, 27-28, 39 
HTML pages, modifying, 37 
PHP scripts, writing, 32-34, 41 
testing, 38, 42 
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employees, adding, 43-58 
HTML pages, creating, 44, 45-48 
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Building a Web Site 


Cy 


with Aj AX 


IF you want to modernize a Web site using Ajax but 
don't want to get bogged down in the details, then you 
need dA Visual QuickProject Guide! 


=,@. You don’t need to know every technique—you just want to know how to get 
your project done. 


Abundant illustrations show you how to perform each iid of your project from 
start to finish. 


=,@. Low priced—why pay for more than you need? 
=,&. For project files, see the companion Web site at: www.dmcinsights.com/ajax/ 


=,@_ Larry Ullman is the president of Digital Media and Communications, Inc., a firm 
specializing in information technology. He is the author of the best-selling book 
PHP and MySQL for Dynamic Web Sites: Visual QuickPro Guide, as well as several 
other books on related technologies. Despite working with computers, programming 
languages, databases, and such since the early 1980s, Larry still claims he’s not a 
computer geek (but he admits he can speak their language). 


And when your'e ready for the next step. . . 


If you enjoyed this project and would like to learn more, pick up a Visual QuickStart Guide, 
the best-selling, most affordable, most trusted quick reference for computing. 


Peachpit Press | USA $19.99 Canada $19.99 UK £10.99 


www.peachpit.com ISBN-13: 978-0-321-52441-6 
www.peachpitcommons.com Gs 
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